How to Fix Font Awesome Not Working on WordPress

how to fix font awesome imageWhen 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.

I’ll get to why in a moment…

If you’re reading this, then Font Awesome is not working for you either.

Bummer, I know. But at least you’re in the right place.

Like you, some people who watched the video tutorial and implemented the method hit an issue with Font Awesome not working for them.

One of those affected was Jonathan, who shared his Fontawesome issue in the video comments.

Curious, I set about researching this and immediately saw a ton of relevant results.

Not good… (that means this happens a lot).

Some people report font awesome showing blank squares.  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
  • etc

Sidenote: who uses ie! OMG…

Anyway, the bottom line is that the Font Awesome not working issue is not that uncommon.

So I 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.

OK, let’s try to fix your issue. Let’s see if this video fixes your issue (if not, continue reading through the other fixes below the video):

The (Probable) Reason Why Font Awesome Icons are not Showing

As I set out to troubleshoot Jonathan’s issue (his font awesome icons not displaying) 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 use 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 (that’s even weirder, in a way).

So I abandoned my local copy and set out to fix the real issue of the missing icon on my blog.

I had 2 icons on my nav 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

Click here to see the full article on GitHub

Font Awesome Solution by Nabil in Stack Flow

font awesome issues answer1

SOURCE: Stack Overflow

Another Font Awesome Solution by NathanG in Stack Flow

font awesome issues answer 2

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

font awesome issues answer 5

SOURCE: Generate Press

By the way, you can help others find this page by tweeting this:

Here'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 at the top of this page, I walk you through my thought process as I was trying to fix this, and the things that I did. If you’re still having an issue displaying the font awesome icons on your WordPress site, you 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.

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 chose one randomly and installed it.

This is the Font Awesome plugin I chose for this test

font awesome plugin

Now, out-of-the-gate, this plugin didn’t appear to fix my issue. I still saw Font Awesome not working. I still had an icon not showing in my WordPress menu.

But I did notice 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

Okay 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 works!

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 still a little whacky, but it works, so this may just work for you.

Where I Would Start Troubleshooting – 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). 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.

And while you’re here…

guides and tools for WordPress

Hoz Report

Attention
SoloPreneur!

Grab The Hoz Report and save time and money with a curated list of 80+ tools
that are working right now...