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
SVG & JS
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
SVG & JS
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:-
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
4. Make sure the Icon Unicode still exists
Font Awesome has evolved considerably over the years and in some cases this has led to changes and breaks in the Unicodes. So, check the Font Awesome 5 Icon Gallery and check that the Unicode for the icon you are expecting to see is still the same. If it's not, then make the necessary updates.
5. 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
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:-
6. 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
Also works for earlier and later versions of Font Awesome
Following the above format will also fix display issues in earlier and later versions of Font Awesome, and of course, keep your versions up to date for the latest icons.
Let us know if you have any more tips for Font Awesome 5 not displaying properly in the comments below.
Join in the Discussion