Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web pages. It’s free, simple to use, and actively maintained by a team of professionals. What’s not to like?

The setup is simple: you add a reference to the .css or font file, and bam, it works. Unfortunately, this simple premise still comes with its downfalls, which creates surprising scenarios. In this article, I aim to explain some common pitfalls, as well as some more obscure fixes that I had trouble finding through basic googling.

Contributing To This Article
There will be a mix of explanations, as well as reference links for each section. If you see anything that’s outdated, or have any suggestions of your own, feel free to reach out!

With that out of the way, let’s get to it!

Common Pitfalls, The First Thing(s) You Should Try

Here are the ‘forehead slapping’ fixes that you should try first. Font awesome not working? The solution may only be a couple of clicks away. If these suggestions don’t work, keep moving down and experimenting.

Check your Adblockers.
An ad blocker can potentially stop icons from loading. Alternatively, you can long click the refresh icon, or use keyboard shortcut CTRL+f5 to clear cache(on Chrome).

Look at your source link. 

Sometimes, your <link> needs an href= instead of a src=. Basically, replace

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Notice, we replaced src with href in the cdn link.

Use HTTPS(or vice versa)
If your URL uses https://, use https in your cdn link. If it’s plain http, try using http in your cdn link.

You’re accidentally linking to it twice
Check your source code, or elements tab in your dev tools. If the same file is being included more than once, that can cause unexpected problems. One issue is linking to both the .css file and the .min.css file. Only link to one at a time, in both local and production environments.

Another issue is including the cdn link twice, check how your framework/stack is rendering these links. Make sure it’s only being included once in your views.

References:

• Font Awesome Icons not showing up. Why?
• Font Awesome not working: troubleshooting guide

My Icons Are Showing Up As Boxes

Sometimes, your icons will load, but they don’t show up correctly. This can mean a few things.

Include the ‘fa’ class
Instead of <i class="fa-envelope"></i>, add the fa class before the actual icon class, which will look like <i class="fa fa-envelope"></i>

You’re Overriding the Font-Awesome font family
Font awesome uses its own font-face for its icons. Sometimes, it makes sense to set your websites font, such as 'Open Sans', as a global property. The problem comes if you use something like the * CSS selector, which will also override <i> elements.

Instead of *{ font-family: your-fonts; }, set the elements you actually want to use your font for, such as headers, list items, and so on. I use something like body{ font-family: my-font; } and it seems to work just fine.

Alternatively, you can explicitly set the <i> icons to the FA family, as long as this rule is higher in specificity(define it after your other font declarations).

For font awesome 5: use font-family: "Font Awesome 5 Free" or "Font Awesome 5 Pro"

For older version, you can use i{ font-family: 'FontAwesome' }

References:

• Font Awesome is not showing icon

You’re Having Trouble with The New Font Awesome Icons Not Showing

Font awesome came out with a new version, Font Awesome 5. This introduced a whole new way of rendering icons, using <svg> elements instead of the old unicode characters. You type them the same way, but they render differently. This is important, because this isn’t backwards-compatible.

Common problems with new versions can give you a flashing question mark icon. This often indicates a clash between versions. Here are a few ways you can fix these font awesome icons not showing up:

Mind The Class Names
Font Awesome 5 uses slightly different class names for their icons. In version 4, you’d use something like fa fa-pencil. In the newest version, you use something like fas fa-pencil-alt. They’re similar, and it can be easy to get tripped up on this at first. Check out the new icons here.

Switching between font awesome SVG and font files
For whatever reason, the SVG version can refuse to render despite trying everything covered in this article. This isn’t a common case, but sometimes you can easily fix the issue by simply switching from font awesome SVG to the regular font files.

You are having NPM issues with Fort Awesome
NPM issues are a topic on its own, but consider doing basic troubleshooting with NPM if you are using Font Awesome as part of your package.json instead of the traditional link method. Check the resource below for some troubleshooting tips.

Don’t use the old link and the new link simultaneously
If you want to use the new svg icons, you need a whole new cdn link to the JS/CSS file. It’s natural to include this in there, and expect things to work. You must make sure this is the only link in there, and that there aren’t previous cdn links in your page as well.

It’s easy to look at the cdn link and see a version number. For the newer version, it should be 5.x.x, and nothing below.

You generally can’t mix and match the old and new icons
You may want to keep your old icons, but add the new svg icons on top of them(on the same page). I’d recommend against doing this, since the rules of each version will clash against each other. Exclusively use either the older or newer version, not either or.

Using font-weight with the new icons
For some reason, you may need to use font-weight: 900; on the newer icons. Try this if nothing else here works. Note that, this is with earlier versions of 5, so you can also try using an updated cdn link.

References:

• Font Awesome Icons Not Showing Up
• Basic NPM Troubleshooting

Moving Forward: Font Awesome 5 and Font Awesome 6

This section has been updated as of 2022

This blog post was written in 2018. Back then, font awesome 4 was the “OG” version of font awesome, but that has drastically changed. There’s almost no reason to use anything below version 5 unless you are maintaining a legacy website. With font awesome 6 out now, there may be new issues introduced that weren’t covered in this article. With the library so fresh, I have no experience fixing them yet, but will update this section as things come up.

Generally, everything in this article should work for newer font awesome versions too.

My go to recommendation is to upgrade your font awesome version and make sure you are linking to the right link/package. Remove older versions if you have them. If you are on 4, you have the chance to upgrade all the way to 6 if you are going through the effort anyways. If you are on version 5, I would personally stick with it until it becomes a deprecated version like 4. There’s still time to stick with version 5, it is alive and well!

Further Troubleshooting

You can dig into the css properties, disabling/changing them one by one to see what happens. To do this, open your dev tools and select the problem icon with the element selector. On the side(or bottom), you’ll see all the css rules associated with the icon.

You may have tried to disable a font-family override, but there might be something else affecting an important property. Look through each property and make sure there aren’t any suspicious font-family or font-weight properties being added by some library(or someone elses code).

This way, you can reverse engineer the problem and see what’s really causing it.

Conclusion

Hopefully, one of these solutions solved your problem. If you found a solution that wasn’t listed here, feel free to let me know! In the mean time, happy coding!