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

Web Fonts & CSS

You'll need a Pro License for this and then you'll apply a custom domain for the CDN to work.

Web Fonts & CSS

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

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

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:-

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

Let us know if you have any more tips for Font Awesome 5 not displaying properly in the comments below.