Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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
Sometimes, font awesome just doesn’t show the icons. Frustrating, I know. 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
, use https://
https
in your cdn link. If it’s plain
, try using http
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
file and the .css
.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.
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
, as a global property. The problem comes if you use something like the 'Open Sans'
*
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
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
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.<svg>
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
instead of the traditional link method. Check the resource below for some troubleshooting tips.package.json
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
, and nothing below.5.x.x
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.
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
properties being added by some library(or someone elses code).font-weight
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!
Posted on
I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post…
Posted on
Hi, Thanks!!! I added ssl to my site and your solution of changing the cdn from http to https worked a treat.
Cheers!
Posted on
Is there a newer version to this post?
Posted on
This is something I will add on my list to update, thanks for bringing it to my attention
Posted on
I was overriding the font with *::before selector. Thanks for the solution!
More Posts
WordPress: How To Create a Custom Admin Button with ACF
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More
Let’s Learn SASS & SCSS: Extending your knowledge with @extends and @mixins (Part 4)
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More
Advancing Your WordPress Workflow: Managing ACF Field Groups The Right Way
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More
Linux | How To Easily Compress a Video With ffmpeg
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More
Getting to Know JS: slice vs splice
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More
[Demo] Defining Reusable Column Extends with SCSS
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. 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,…
Read More