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