Font Awesome Isn’t Working: The Ultimate Reference For Fixing Your Icons

Font Awesome is rampant in modern web design, and that’s a bit of an understatement. 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 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! I’ll add it in and credit your contribution.

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

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

i{ font-family: 'FontAwesome' }
References:

You’re Having Trouble with The New Font Awesome

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 uni-code 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 this issue:

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.

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:

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!