This is a quick fix tutorial on how to fix Font awesome Icons not showing in WordPress. This can help in fixing the problem in less then 2 mins..
Sometimes font awesome showing blank squares and sometimes don’t see the icons at all.
Why Font Awesome icons not showing?
The current version of Font Awesome 5.0.0 + comes with five styles which require five different type of Style Prefix, for example:
| Style | Availability | Style Prefix | Example |
|---|---|---|---|
| Solid | Free | fas |
<i class="fas fa-camera"></i> |
| Regular | Pro Required | far |
<i class="far fa-camera"></i> |
| Light | Pro Required | fal |
<i class="fal fa-camera"></i> |
| Duotone | Pro Required | fad |
<i class="fad fa-camera"></i> |
| Brands | Free | fab |
<i class="fab fa-font-awesome"></i> |
Only Solid & Brand icons are free to use, So most of the time we will be using fas & fab as Style prefix for using font awesome icons in our WordPress theme.
I am using cdnjs for loading font awesome’s Css and Js files, which you can see in image below:
As we can see I am using “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/fontawesome.min.css” and “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/fontawesome.min.js” file in my current WordPress theme development project.
Cdnjs provides us various options to add Css and Js files for using font-awesome in our web development projects which you can see in screenshots given below.
To render the font awesome icons correctly we need to replace these two files fontawesome.min.css and fontawesome.min.js with https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css and https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js respectively.
Once replacement is done save your project and reload the web page you can now see the font awesome icons are showing without any error.
Stay connected and you can also subscribe to my channel TheWebGuru – YouTube Channel
Thank you, All your comments and queries are most welcome.
