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.
So let's start with the video:
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:
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:
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:
SOURCE: Stack Overflow
SOURCE: Stack Overflow
SOURCE: Scott Hanselman
SOURCE: Generate Press
By the way, we're not done yet, but you can help others find this page by tweeting this:
[clickToTweet tweet="Here's a handy list of solutions to Font Awesome icons not showing issues." quote="Here's a handy list of solutions to Font Awesome icons not showing issues." theme="style3"]
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:
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:
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.
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 keep 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 switching to a dynamic alternative... soemthing 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:
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.
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.
This seems to verify my suspicion that at least some of these missing icon issues are down to referencing an out of date stylesheet.
Ok, so here's what I did next to fix the issue on my blog:
The interesting thing is that the original YouTube Font Awesome icon is still not showing but the new one is.
At least now I can simply replace the original icon with the one new one.
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.
It may also be a conflict with your theme (especially older themes). In case you find this to be the case, here's the theme I use, which you can get for free.
I hope something on this page fixes the issue for you.