The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Font awesome icons not showing on some pages?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #188346

    Hi I have a problem where on random pages some of my font awesome icons will not show while on others they will show just fine ? Here is an example where some icons in my menu bar dont show on my contact page : . What can I do to fix this ?


    Working for me.

    Chrome 64bit on W8.1

    Chris Bloomfield

    Regarding your second (more recent) question: I may not understand what you mean about poor flow, but I think I can help. When resizing the browser after the code you’ve used above has been inserted, the login form moves to below the list of forums, but the yellow icon arrow doesn’t stay in place relative to the form.

    This is because it’s essentially positioned in the top-right corner of the form container. If you change your CSS to make the icon appear in the corner of the form itself, your issue should be fixed – i.e., use #login-form:after rather than #widget-login:after. You’ll need to adjust margins a little to get it looking correct. I found that using {margin-right: 0; margin-top: -68px;} did the trick.

    You may be aware of the following points, but just in case, here are two little bits worth noting: First, some older browsers (IE8) won’t accept :after, but will accept :before, so using :before is preferable is possible. You may need to use absolute positioning (on the :before pseudo-element, with relative positioning on the container) to get your icon in the right place though.

    Second, since you’re replacing your form submit button with something else, you’ll need to both use Javascript or jQuery to handle the onclick event so the faux button is still clickable, and will also need to provide a non-JS fallback.

    Hope that helps, apologies if you’ve already considered this stuff!

    Chris Bloomfield

    That may be best, if you don’t want the extra work. If you’d still like to use the FA icon button though, here’s how you could do it:

    Make a div with a unique ID like #login-submit-block, next to your submit button in your HTML code. Use your FontAwesome CSS on that div to get your icon in the right place. You can move this login button replacement around to get the full control of it that you need. Ideally you would want to just style the actual submit button, but you can’t use FA CSS on any type of input elements because they don’t contain content, so can’t use :before or :after.

    To make it work like a submit button, use jQuery. Something like this should do the trick:

    $(‘#login-submit-block’).click( function() {
    } );

    The code says, when a user clicks my submit div button, submit my form.

    Using non-JS fallbacks correctly requires a more detailed that what I could elegantly explain, but basically, you would use a class of “non-js” on your body, and remove it with Javascript when the page loads. This lets your CSS target both JS and non-JS users. Your CSS would be something like this:

    Google can help you out with using non-JS fallbacks, but the CSS should work for you.


    A quick look at your code with the inspector shows that on the linkage page you’re still using an image that I assume you deleted, that’s the reason it’s not showing up. So my guess is that you might have the same problem on several other pages.


    Nope, thats not it. To test this, for the menu icon for “groups” I went into the parent style sheet and deleted the call for a background image. Yet it still does not show. Plus I copied the same steps for all my other icons so If one does not show then all should not show. Yet this is not the case. I still cant figure out why. When I do inspect element in Internet explorer everything is just crossed out for that icon?

    Chris Bloomfield

    You are using an old version of FontAwesome – you’re using 4.0.3, the latest version is 4.2.

    Use the latest version, then you’ll be able to use the fa-university (aka bank/institution) character.


    How is this possible ? I went into my parent themes head section and I see the same code I placed from the start at the bottom of the file :
    <link href="//" rel="stylesheet">

    I then searched the header file to see if the theme had it implemented ( but the older version your talking about) before so there might be a conflict but I see no font awesome calls in the header but mine ?

    • plus if me calling an older version of font awesome was the case, then the “institution icon” should not show on all pages. Rather it does not show on “some” random pages of my site ?
    Chris Bloomfield

    View your site source and Ctrl+F for “font-awesome”. The first result shows that the plugin “Symple Shortcodes” has included an outdated FA stylesheet.

    There might be settings for this plugin which allow you to stop this from happening. If you have to use the plugin and there aren’t settings available, you could edit the plugin – although be sure to prevent it from updating (by using another, selective update prevention plugin, or by increasing the plugin’s version number to something very high).

    Alternatively, the plugin “Better Font Awesome” has an option to prevent the inclusion of other FA stylesheets by other plugins. That’s the plugin I use in my projects, and it works beautifully – it also allows you to include icons via shortcodes, and from a TinyMCE dropdown menu in the Visual Editor.


    Hmm ok I disabled the symple plugin to see if it was the cause ( ill leave the plugin disabled for now) , and its still not showing it on this page . I looked at my plugins and no others look to have any font awesome options but just in case I downloaded Better Font Awesome, and clicked the disable other FA plugin calls option.

    Still the same issue though ? I left it disabled so you can see if it shows anything new

    Thank you for helping me

    Chris Bloomfield

    No problem, happy to help!

    Please check your source again (via view source) – there’s another FA stylesheet, from the plugin Team Showcase.


    Wow thank you again. I contacted the plugin author and he gave me an updated version and that finally seems to have fixed the issue. May I ask how you were able to see the calls to font awesome? Did you just use fire bug? and if you did what did you press to see all the font awesome calls?

    Chris Bloomfield

    Glad you got it sorted :)

    To view the page source – on using Chrome, you just right-click and choose View Page Source (or, press Ctrl+U). Other browsers can do a similar thing with the context menu, the option is just named differently across most browsers.

    Regarding the crossed-out rules in IE – I think it’s because IE doesn’t seem to handle coding with peudo-selectors very well. So, in Chrome, :before and :after elements are actually selectable in the DOM/CSS inspector (i.e., right-click > inspect element), but IE doesn’t have this option.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.