How to Fix Font Awesome Icons Not Showing in WordPress
by Hoz
When I first wrote a quick guide about how to add social media icons to the WordPress menu using Font Awesome icons, I didn't foresee doing a followup for Font Awesome not working.
What I didn't realise at the time is that adding font awesome icons doesn't always work for everybody.
Some people report font awesome showing blank squares. Others don't see the icons at all.
I'll get to why in a moment...
So in this post I'm going to share with you my video where I walk you through some ways to fix font awesome issues - things like font awesome icons showing as squares, or the icons showing as blanks - and then I'm going to give you even more fixes that I discovered after recording the video, including my own fix after my own Font Awesome icon turned into a blank square.
Hopefully, one of these fixes should get your font awesome problem sorted.
The video above helped a lot of people who were experiencing issues displaying font awesome icons on their websites...
... but not all.
So I set about searching for more solutions, and I'm glad to say I found some - one fix in particular that seems to help those people who couldn't fix theirs after watching the video.
Here are a few common issues I found - maybe yours is here:
- font awesome icons not working in chrome
- some font awesome icons not showing
- font awesome icons not showing in ie
- etc
-font awesome icons not working in chrome
Sidenote: who uses ie! OMG...
Anyway, the bottom line is that the Font Awesome not working issue is not that uncommon.
So I decided the best way to help was to create this page as a resource. That also enables me to keep adding font awesome fixes and solutions as I find them.
Let's go through them now:
The (probable) reason why Font Awesome icons are not showing
As I set out to troubleshoot the issues I was reading about in the video comments (ahem, head on over to the YouTube channel and remember to subscribe..)
I started out by trying to replicate the problem. I tried to break a perfectly working copy of my blog (on my local machine) and I just couldn't get to a font awesome not working locally situation.
Then there was this bizarre timing thing...
I was in the middle of switching hosts (you can see the hosts I'm currently using here) and when my blog transferred to the new host, Font Awesome stopped working for me! Well, partially. Some Font Awesome icons were not showing on my WordPress blog but others were showing fine (that's even weirder, in a way).
So while I couldn't replicate the issue on purpose, the issue came to find me when I switched hosts. You have to laugh...
So, needless to say, I abandoned the local copy of my blog and set out to fix the real issue of the missing icon on my blog.
Here's how it was:
I had two icons on my navigation menu. One icon was showing and the other wasn't. The Font Awesome icon shortcode hadn't changed, so it didn't really make much sense.
So I dug deeper and here's what I found:
Some common solutions to Font Awesome missing icons: Font Awesome's solutions in GitHub
Font Awesome solution by Nabil in Stack Flow
Another Font Awesome solution by NathanG in Stack Flow
Font Awesome Fix by Scott Hanselman
And a 'What if Font Awesome icons don't show up' video by Template Monster
Font Awesome fix by Pete
Side Note: Some may experience Font Awesome not working on server side setups, but I think the fixes are going to be the same. However, if you use a CDN, then it's worth noting some of the solutions above, which include making a small modification to the stylesheet reference line.
Now, if all the above solutions fail, or if you'd rather do things with plugins instead of code, then please read on:
A plugin that can fix the missing icons Font Awesome issue
Luckily, Font Awesome has a plugin now. Here it is: Font Awesome plugin. If that doesn't fix your icons, try contacting Font Awesome support, as this is their plugin and that may just get you a fast reply (or some help).
Now let me share how I fixed my missing icon problem:
How I fixed the missing icon in Font Awesome
In the video at the top of this page, I walk you through my thought process as I was trying to fix this, and the things I did.
When I looked online, I saw that some people were having the very same issue I was having: only some icons not showing, but the others display fine. I did actually get to see a square instead of the font awesome icon at one point when I tried a variation of a shortcode, but that may have been down to my syntax.
Anyway...
The first thing I did
First, I checked out my page source code and found a reference to a style sheet which is the font Awesome Stylesheet.
The line of code references a particular version of the style sheet, and this is where I think the issue may be coming from for many people, because when
I looked at some of threads online, I saw the line of code to reference the stylesheet and I noticed different version numbers according to what the latest style sheet was at the time.
Other threads advised checking your header and adding the line of code to reference the style sheet, and sure enough, there was always a different a version mentioned.
And finally, there were plenty of people pointing out, after checking the source code of whoever was having an issue, that they were referencing a style sheet that was the wrong version.
So I think what's happening - reading between the lines - is that font awesome keeps updating their system at their end and some people are winding up with old or older style sheets and that's then causing a problem.
So the thing to do in this case was to move away from static code and switch to a dynamic alternative... something that would check the current version of the style sheet needed.
Obviously, I mean a plugin.
Now, the Font Awesome plugin I dropped a few paragraphs ago should help fix your Font Awesome woes.
But if it doesn't, then know that there are other plugins that work for many users.
Let's look at those now:
In search for a plugin to fix Font Awesome missing icons...
Plugins can be a great solution with issues like this because the plugin - even if it's a third party plugin - providing it has access to any APIs needed - should check for the latest style sheet and reference that.
And naturally, you'd expect this functionality from any plugin that claims to integrate with Font Awesome.
In the video, you can see me search my plugins area for 'font awesome' and pulling up a few relevant results. So I chose one randomly and installed it.
This is the Font Awesome plugin I chose for this test
Now, out-of-the-gate, this plugin didn't appear to fix my issue. I still saw that Font Awesome was not working. I still had an icon not showing in my WordPress menu.
But then I noticed a setting in the plugin that you can set for it to always pull in the latest version.
Bingo!
This seems to verify my suspicion that at least some of these missing icon issues are down to referencing an out of date stylesheet.
The second thing I did
Ok, so here's what I did next to fix the issue on my blog:
1. I went back to the Font Awesome website
2. I searched for a YouTube icon (because that's the icon that is not displaying in my menu)
3. I copied the shortcode just as I did originally
4. I went back to my WordPress menu, added a new custom icon, pasted the code and voila. It worked!
The interesting thing is that the original YouTube Font Awesome icon is still not showing but the new one is.
Search me...
At least now I can simply replace the original icon with the one new one.
What if you do this and the icon still does not display?
Search font awesome for the same icon that you're having an issue with and choose a different design or variation of that icon. It makes little sense, I admit, but just try that because the way I fixed it on my blog is a little whacky, but it works, so this may just work for you.
Where I would start troubleshooting Font Awesome issues - what to try first
1. I would definitely try adding a new Font Awesome icon (or even the same shortcode) to a new custom link in your WordPress menu.
2. If that doesn't work, then I would test some of the plugins that integrate Font Awesome with your blog.
It may also be a conflict with your theme (especially older themes).
I hope something on this page fixes the issue for you.
Checkout the SEO Webinars
