When I first wrote 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. The article saw a lot of great feedback, especially with a related video on adding icons to the header or footer.
What I didn’t realise at the time is that the method used, which involves a site that hosts the icons, doesn’t always work for everybody. Thus, it was inevitable that, as more people that saw the video and implemented the method, one would eventually his an issue with Font Awesome not working for them.
And that was Jonathan, who shared his Fontawesome issue in the video comments.
Curious, I set about researching this and immediately saw a ridiculous amount of relevant results.
Some people report font awesome showing blank squares and others don’t see the icons at all.
A quick scan down the first page reveals some of the most common issues, which include:
- font awesome icons not working in chrome
- some font awesome icons not showing
- font awesome icons not showing in ie
As you delve deeper into these results, it soon becomes apparent that Font Awesome not working is not that uncommon.
So I set out to find out a little bit more and then decided to create this page as a resource because I have a feeling I’m going to be continually adding font awesome fixes and solutions as I find them.
Here's what we're going to be covering...
- 1 The (Probable) Reason Why Font Awesome Icons are not Showing
- 1.1 Here are Some Common Solutions to Font Awesome Missing Icons
- 1.2 What if Font Awesome Icons Don’t Show Up Video by Template Monster
- 1.3 Font Awesome Fix by Pete
- 1.4 Plugins that Can Fix With The Missing Icons Font Awesome Issue
- 1.5 How I Fixed Font Awesome Not Working – the Missing Icon
- 1.6 Is there a Plugin to Fix Font Awesome Missing Icons?
- 1.7 The Second Thing I Did
- 1.8 Where I Would Start Troubleshooting – What to Try First
The (Probable) Reason Why Font Awesome Icons are not Showing
As I set out to troubleshoot the issue of font awesome icons not displaying, I needed to replicate Jonathan’s issue. So I tried to break a perfectly working copy of my blog on my machine and I just couldn’t get to a font awesome not working locally situation.
Bizarrely, I was in the middle of switching my host (you can see all the things I use in My Stack) and when my blog transferred to the new host, Font Awesome stopped working for me! At least, some Font Awesome icons were not showing on my WordPress blog.
So I abandoned my local copy and set out to fix the issue on the missing icon on my blog.
Bizarrely, some icons were showing, and one wasn’t. And obviously the Font Awesome icon shortcode hadn’t changed, so it didn’t really make much sense.
Here are Some Common Solutions to Font Awesome Missing Icons
Font Awesome’s Solutions in GitHub
Font Awesome Solution by Nabil in Stack Flow
SOURCE: Stack Overflow
Another Font Awesome Solution by NathanG in Stack Flow
SOURCE: Stack Overflow
Font Awesome Fix by Scott Hanselman
SOURCE: Scott Hanselman
What if Font Awesome Icons Don’t Show Up Video by Template Monster
Font Awesome Fix by Pete
SOURCE: Generate PressThere's a handy list of solutions to Font Awesome icons not showing issues.Click To Tweet
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.
Plugins that Can Fix With The Missing Icons Font Awesome Issue
Due to some plugins coming and going, let me give you a straight link to the search results rather than recommend one (let the feedback speak for the plugins): WordPress Repository
How I Fixed Font Awesome Not Working – the Missing Icon
In the video, I walk you through my thought process as I was trying to fix this, and the things that I did, so that if somebody is having an issue displaying the font awesome icons on their WordPress site, they might be able to solve this with one of the solutions I mention there.
When I looked online, I saw that some people 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, so I discarded that.
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 the threads online some people were providing 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.
Others advised checking your header or adding the line of code, 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.
This is all a pain in the butt of course.
So the next thing I did, was the obvious one…
Is there a Plugin to Fix Font Awesome Missing Icons?
Plugins can be a great solution with issues like this because the plugin – if it’s well thought-out and providing they have access to any APIs needed – should check for the latest style sheet and reference that.
You’d expect this functionality from any plugin that claims to integrate with Font Awesome.
Now, it doesn’t look like Font Awesome actually has an official plugin of their own, which is a shame, but there are quite a few plugins and some look okay.
In the video, I searched my plugins area for ‘font awesome’ and pulled up a few relevant results. So I choose 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 Font Awesome not working. Or rather, I had an icon not showing in my WordPress menu.
But I did notice in the plugin that there is a setting that you can set for it to always pull in the latest version.
This seems to verify the suspicion that at least some of these missing icon issues are down to referencing an out of date stylesheet.
The Second Thing I Did
Okay so here’s what I did next to fix the issue of Font Awesome not working properly on my blog.
- I went back to the Font Awesome website
- I searched for a YouTube icon (because that’s the icon that is not displaying in my menu)
- I copied the shortcode just as I did originally
- I went back to my WordPress menu, added a new custom icon, pasted the code and voila. It works!
The interesting thing is that the original YouTube Font Awesome icon is still not showing but the new one is.
Still, I can now either replace the original icon with the one new one or just delete the missing icon altogether and just move the new one around in my menu and put it where I want it to display.
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 still a little whacky, but it works, so this may just work for you.
Where I Would Start Troubleshooting – What to Try First
- I would definitely try adding a new Font Awesome icon (or even the same shortcode) to a new custom link in your WordPress menu.
- If that doesn’t work, then I would test some of the plugins that integrate Font Awesome with your blog.
Please Share This Content
Hey, I would really appreciate it if you share this content with your friends and followers :)👇