How to Fix Font Awesome Icons Not Showing in WordPress
Articles Blog

How to Fix Font Awesome Icons Not Showing in WordPress

August 11, 2019


hey it’s Hoz and today’s video is all about troubleshooting the font awesome icons not displaying – that is when you place the font awesome icon shortcode somewhere let’s say for example on your WordPress menu and the icon just doesn’t appear. So I wasn’t aware that this was actually an issue until Jonathan pointed it out in the comments – he mentioned that it wasn’t working for him on his theme so I had a quick look online and boom turns out that this is actually quite a common problem and in fact there are thousands of results for this issue. Now, the problem well let’s say the challenge is that after delving a bit deeper into some of those threads I saw that a lot of people have different answers and they don’t always work so this is what I’ve managed to do so far and by the way I think this is going to be an ongoing thing because I don’t think having read a few of those threads online I don’t think that every solution is going to work for everybody so what I’m going to do is I’m going to create a blog post on my blog I’m gonna put a link to that in the description under this video and I’m just gonna mention a couple of things that I’ve done so far in this video but if neither of those work for you then just click the link head on over to the blog and I will continue to add solutions as I come across them. And on that note if you do something and it does work for you then please leave it in the comments that way I can add it to the blog and credit that to you and that way we can build up a resource and then if somebody is having an issue displaying the font awesome icons they might be able to solve this with one of the solutions in there. Okay so this is my blog and this is actually the live blog this is not a copy of it and you can’t tell this but I can: there is an icon missing there. Now I tried to replicate this and eventually and I have no idea how and I’ve managed to make one icon go away but not the other two so this one here and this here both font awesome icons and here this should be an icon but it’s gone it’s missing so this is the issue that some people are having. Now, when I looked online I saw that some people having this very issue: only some icons disappearing and others are showing; then there are other people who are seeing squares instead of the icons and then there’s other people who just don’t see any icons whatsoever. Ok so we need to make this icon appear and I’m going to show you something at the end of this video that I actually did and it solved this for me because the other things that I looked at so far didn’t. Okay so let me start by showing you one thing: if I click on the view source and I do a search for awesome you’ll see that there’s a reference here to a style sheet which is the font awesome style sheet but here’s what I want you to look at because this is the root of the issue. If you follow along the URL there you’ll see that it’s actually referencing a style sheet that’s hosted on MaxCDN’s server which is the font awesome style sheet but it has a version number – it’s four point seven point zero and I think that’s the root of the issue because when I looked at some of the threads online some people were providing this line to reference the stylesheet and they were saying check that this is on your header or add it but there was always a different version and then I saw some threads where somebody would point out that after checking the source code of whoever was having an issue they noticed that they were referencing a style sheet that was the wrong version. I think what’s happening – reading between the lines – is that font awesome keep updating their system or their thing at their end and some people are winding up with old or older style sheets and that’s then causing a problem. So this is all a pain in the butt of course. So the first thing that I did when I saw this was to search for a plug-in because a plug-in would hopefully integrate with the font awesome system and make sure that we’re pulling in the right information or rather the up-to-date information. Now, it doesn’t look like font awesome actually have an official plugin but there are quite a few plugins okay. So if I search for font awesome then you’ll see that a few plugins come up and as I say I don’t think that any of these are actually made by font awesome so I don’t have any history on any of these plugins so I can’t recommend one but I noticed that this one: short codes ultimate has almost 3/4 of a million installs so that could be one to look at and I see that a lot of them have the full 5 stars when it comes to reviews so if you’re having an issue displaying font awesome icons this may be a solution. Now, let’s install this better font awesome just to try one plug-in and I’m doing this on my live blog which is not always a good idea but let’s see what happens. Okay so I just installed that let me just refresh that and see if out of the box anything happens. Okay so know that icon hasn’t shown up there. Okay so let’s go and check out what the plug-in actually does. Okay so this is the plug-in itself. Now, you’ll notice here there is a version setting and then we set the drop down you see that it’s set to always latest but you’ll see all these other versions and this more or less verifies what I was saying before – I think this is the actual issue. In other words when font awesome update their end of things if we have a static line of code that references one stylesheet a particular version then we’re going to be out of date. So I think for some people a plugin is going to be the way to go and obviously set to the latest this means that the plugin is going to check what the latest version is and it’s gonna pull in the latest version. Now, I noticed this: attempt to remove fontawesome CSS and short codes added by other the plugins and themes – that could be a handy thing because the first problem I thought of is that I already have a line in my header referencing a particular style sheet. I think it was four point seven point zero which looking at this looks like it’s the latest but I still have the issue where I’ve got one icon missing so you can see this is this is a bit of a rabbit hole and I’m not surprised that there were over eight million results when I searched for font awesome icons not showing so this is why I think we can build a resource with different solutions that actually work because I don’t think that it’s gonna be one single thing that fixes everybody’s problem. Okay so I’m about to show you what I did before that actually fixed this for me but I wanted to show you what I think the issue is and that gives you an understanding of why it might not be working and also helps you if you’re going to do some research yourself because it gives you a starting point and also the fact that there are some plugins out there that integrate font awesome with your blog or with you website and those may be worth testing. I haven’t tested them all of course I’ve just plugged in one but that’s definitely worth a try if nothing else seems to be working for you. Now let me show you what I actually did that actually worked for me – I undid it of course just so I could show you – but I just went back to font awesome and went to icons and I then searched for YouTube because that’s the icon that I’m missing okay um I can’t actually remember what icon I had let’s click on this one okay let’s copy the code let me copy that to my clipboard and now let’s go to the menu. Okay so here you can see the actual icon that isn’t showing that’s the font awesome code there so what I’m gonna do this I’m gonna add a custom link I’m just gonna make that here and it doesn’t have to be a real address I’m gonna paste the new icon so that’s gonna be the last one there. Now I want to save that let’s go back to the blog and once that finishes loading let’s refresh the browser and look this makes no sense so now I have a youtube icon even though I can’t get this one that disappeared to come back I just added one and it works so all I’ve got to do is just either replace this icon with the one that’s missing or just delete the one that’s missing altogether and just move this around in my menu and put it where I want it to go. iIt makes no sense I know but it worked and that’s all I care about at this point. So as I say this is just the tip of the iceberg I think there are going to be a good dozen different things to try and do to solve people’s problems but at least I think this gives us a starting point. So the first thing I would do is go back to front awesome go to the icon that you wanted or the one that’s not displaying for you and just add a new custom link on your menu and just see if that appears and on that note if a particular icon doesn’t show let me just go back one here okay let me just search for YouTube again you see there are three icons here so I think in most cases there are going to be multiple icons. If one particular icon doesn’t show just try the shortcode for a different one just to see what happens. As I say it makes no sense that that icon should now be displaying but what can you, do it’s working! So I would try that solution first before adding a plugin. So we have two solutions to start with, the first one is to add the icon again manually and the second one is to try one of the few plugins that are out there and see if that actually works for you. If none of those things work then it’s going to be a case of implementing different solutions that other people have talked about online and as I said at the beginning I will keep adding those to the blog post so give us a thumbs up in the comments if that works for you because that will be great to know and if you haven’t already please subscribe to the channel and that way you can keep up to date with all these episodes. Take it easy and I shall catch you in the next video

Only registered users can comment.

  1. Hoz, I want to thank you again for all of your time and effort. I ended up using a plug-in (Better Font Awesome) and it cleared up the problem for me. Link is rendering across multiple browsers and works properly. Thanks. Much appreciated.

  2. Comparing what does NOT work: <class="fa fa-youtube-square> with what does: <i class="fa fa-youtube-square></i> … the difference is the "i" at the beginning of the opening tag and adding the closing "</i>" tag.

  3. On your blog the hack Font Awesome Fix by Scott Hanselman to add "fa" solved my problem thanks to both of you guys!!

  4. Thanks- your fix didnt quite fix my issue, but your rational did. Here is the quick fix i used….my code from awesome font kept appearing for all icons with the term 'fab' like <i class="fab fa-instagram"></i> and would not show up. Once i removed the 'b' from 'fab' like <i class="fa fa-instagram"></i> by issue was resolved.

  5. Awesome Plugin and tutorial ! Thanks so much, it fixed my theme issue that was restricting font awesome on my woocommerce store page. 🙂

  6. I also copied the icon from the font awesome site and put that into my website and it worked-yay! Thanks. I like your voice. It's a curious mix of accents 🙂

  7. I liked the original idea of not using a plugin. I don't want to use Fontawesome anymore. What about if as a designer you have your own icons?

  8. Placing the code was a real treat. Wanting you to know this helped a novice techie (if that exists) to avoid MORE PLUGINS lol.

  9. The first plugin you mentioned worked for me!!! YAY 😀 Thank you so much!!! I've been scratching my head for weeks about the squares I kept seeing on my website!!

  10. This works for me! Thank you so much. I installed a plugin called "Mobile Contact Bar" and suddenly some of the icons dissapeared (the social media icons only) and I was looking for a solutions but every talks about having the Font Awesome file on my hosting, but I didn't have it, because that came with the plugin Bar so… Install another plugin for update works for me, but nobody says so jajajaja. See you

  11. I have been banging my head against the wall of this problem for 3 weeks. I've tried EVERYTHING… except a plugin. Never occurred to me that there would be one to fix my problem, but the first one you downloaded did the trick for me! My issue was that there was more than one style sheet called "font awesome." Safari didn't have an issue with it, but Chrome was displaying boxes. The different attempts I had made to the code were only managing to break FA in Safari, when they worked in Chrome. Even though my solution wasn't the same as yours, watching you think it through and work on it really saved my butt!!

  12. Some people like it short, but I'm glad you started with "What could be the root of the problem" and then solve it. Thanks a lot man. The best explanation for me. Thumbs upppp

  13. Thank you for the video. I have the same problem too and I found out in view source that elementor has its own icons. I deactivated the plug in and the font awesome icons for the themes is now working.

Leave a Reply

Your email address will not be published. Required fields are marked *