Font Awesome 5 Icons not Showing? font awesome 5 icons not showing 1 862x454

Font Awesome 5 Icons not Showing?

Glenn Blog Leave a Comment

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
Font Awesome 5 Icons not Showing? 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.