Here are steps to check if your Font Awesome 5 Icons are not showing (typically a blank bordered box) along with Font Awesome 5 implementations for Web Font CSS & SVG JS:-
1. Ensure you are correctly linking to Font Awesome 5 CDN within the ‘Head’ of your document
Obvious right? Perhaps not…
Free
Web Fonts & CSS
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
Pro
You’ll need a Pro License for this and then you’ll apply a custom domain for the CDN to work.
Web Fonts & CSS
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>
Latest releases are shown at the time of posting. Follow this link for up to date Font Awesome CDN versions.
2. Check you are calling the correct Font Awesome CSS and that you have the required privileges
Font Awesome 5 is split into Solid, Regular, Light, Brands and these can only be applied under the following levels:-
| Icon Style | Availability |
|---|---|
| Solid | Free |
| Regular | Pro Only |
| Light | Pro Only |
| Brands | Free |
So, for instance, you cannot show any icons within Regular or Light if you are using Font Awesome Free.
3. Make sure your unicode format is correct
.something:before {
font-family: "Font Awesome 5 Free";
content: '\f077';
font-weight: 600;
}
note it’s not ‘/f077′
4. Establish that you have the correct Font Awesome Font Family in your CSS
If you have the correct file/privileges (as above), then ensure your element is covered by the correct Font Awesome Font Family
Free
font-family: "Font Awesome 5 Free";
Pro
font-family: "Font Awesome 5 Pro";
The above are generic Font Families for Font Awesome 5, but you can also call the specific Font Awesome 5 Styles (Solid, Regular, Light, Brands): –
Free
font-family: "Font Awesome 5 Free Solid"; /* Solid */ font-family: "Font Awesome 5 Brands"; /* Brands */
Pro
font-family: "Font Awesome 5 Pro"; /* Solid, Regular, Light */ font-family: "Font Awesome 5 Pro Regular"; /* Regular */ font-family: "Font Awesome 5 Pro Light"; /* Light */ font-family: "Font Awesome 5 Brands"; /* Brands */
Note that as above ‘Brands’ style does not seem to follow the Font Awesome naming convention and on both Basic & Pro versions those icons have the font family of ‘Font Awesome 5 Brands’. So for example, if you want to show the Font Awesome Facebook Icon then you should apply the “Font Awesome 5 Brands” style:-
.facebook:before {
font-family: "Font Awesome 5 Brands";
content: '\f39e';
font-weight: 600;
}
5. Add a higher font weight
Interestingly many browsers will display a blank box unless you use a Font Weight over 600, so add the following to your CSS
font-weight: 600;
or something even higher like:-
font-weight: 900;
Let us know if you have any more tips for Font Awesome 5 not displaying properly
About the Author
