Jump to content


This topic is now archived and is closed to further replies.


Font Awesome Not Displaying Correctly

Recommended Posts


I'm getting some wonkiness using fontawesome. Two issues that I can discern: 1. Icons used on the fixed navbar menu items display as squares in Google Chrome, but only on pages where I'm using font awesome elsewhere on the page (see http://sustainablesummer.org/destinations/ecuador-coast-highlands/ for example of the latter). 2. When used in a list, the font awesome icon doesn't replace the unstyled bullet - both appear on the page. I'm using this list in a Content Box in a sidebar. This issue is consistent across browsers. 


This is the first time I've used font awesome, but I'm under the impression that it should work fine out of the box in pagelines framework.


It appears that the first issue with Chrome may have something to do with a conflict with NextGen, since I can resolve by deactivating the nextgen plugin, but I'm not sure how to resolve the conflict. I would try to tackle that myself, but even with all plugins deactivated, I'm still getting the second error, which leads me to think there is something I need to do within pagelines to resolve both issues.


A search through the forums didn't yield any workable solutions. Thoughts?



Share this post

Link to post
Share on other sites

Hello Jsharpe. 


Try deactivating all plugins and then reactivate one by one. It may not be nextgen conflicting itself, it may be a conflict between that and another plugin. 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites

Thanks for the suggestion, but I just decided to not use font awesome in lists and I've been able to work around some of the other issues.


Even with all plugins deactivated, this display issue with font awesome in lists still persists. I've also noticed that if I toggle from the HTML editor on a page with font awesome to the normal wordpress visual editor, Wordpress will strip the font awesome code from the HTML editor.


Like I said, I'm working around it and just saving working in the html editor and saving the code offline in case I (or another admin) accidentally toggles over to the visual editor. Very weird, but not that big a deal. 

Share this post

Link to post
Share on other sites

Thanks for letting us know.


I've been able to use it in lists, but found it's much simpler, easier and less cumbersome to just include the code in the actual list item text detail, and display: none; for the actual bullet.  This also gave me the ability to use any icon I desired for each particular list item. I can even change their color this way, on an individual basis.


It is possible to apply font awesome icons as bullets, but I've never seen this done easily.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

  • Similar Content

    • John Olsson
      By John Olsson+
      I wondering (and custumers) when does Font Awesome 4.7 comes with an update of Pagelines?
    • selmakdesign
      By selmakdesign
      Could really use some help on this one:
      How can I customize the navigation in the quickslider?
      The navigation (previous and next slide) is a font awesome icon which looks like a simple grey box.
      1. I'd like to replace this with custom arrow images?
      2. Is it possible to also add to the navigation: first slide/last slide?

    • davemoppert
      By davemoppert
      Hey guys,
      I am having issues with my fontawesome icons displaying properly in Chrome and Firefox... anyone else having this issue?
      Noticed that the icons show up when I am logged in, but when I log out, the turn into little boxes. 
      Any workaround? A couple of sites I am having issues with: 
    • Redita
      By Redita
      Hello guys,
      I'm having a little issue and hope someone can shed light:
      Font awesome icons are not showing on Chrome, I can only see blank little squares. But they do on Safari. I have debug mode activated. Website is: www.nexinteractive.com 
      I've flushed the cache in the DMS toolbox and nothing. This started happening after migration from one server to the other. Both are Windows ISS servers and not commercial, but the client's. I'm sure it has something to do with the moving, but can't figure out what.
    • John Olsson
      By John Olsson+
      Hi there,
      Suddenly, when I start a new site, all the font awesome-icons turns into squares, they won't show.. But if you log out, then it works..
      Any ideas about this, any known history about this?