How to Fix Font Awesome Icons Not Showing in WordPress

48 thoughts on “How to Fix Font Awesome Icons Not Showing in WordPress

  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 did not have to download a plugin, instead, I had to delete and add some code.
    Original text on font awesome: <i class="fa fa-facebook" aria-hidden="true"></i>
    What I updated original text to: <i class="fab fa-facebook"></i>
    I added the "b" after fab and deleted "aria-hidden="true"
    It worked on my website at
    Thank you everyone for the advice! Hope my workaround helps you out.

  12. I went to Font Awesomewebsite, copied this link <link rel="stylesheet" href="" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">, added it to my header and it worked.

  13. 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!!

  14. 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

  15. 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.

  16. I installed Font Awesome plugin and that resolved the social media icons, but the cart basket is still missing in the home page, showing a square on it. Suggestions are welcome.

  17. Hi, I had the exact same problem as other icons are showing but only Youtube not, so i tried download the 'better-font-awesome', and it just work, thanks for your video!

  18. What about icons inside of elementor buttons though? There doesn't appear to be an option to add custom code like you did with the menu icon. It's strange, about 1/3 of every icon I select doesn't appear or shows a square. This is a huge inconvenience, especially with the icon library already being quite limited. Having to install another plgin to solve this is not very desirable since I already have a ton of plugins installed. Any suggestions would be appreciated. Thanks.

  19. How to fix issue in your case: <i class=“fa fa-youtube” aria-hidden=“true”></i>
    10 minutes of my life wasted 🤦‍♂️

Leave a Reply

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