(This post was originally written in January 2022 on my defunct blog. Moved it here.)
Check out Dan's counter on this post! It's pretty good! :-)
When I first discovered FontAwesome in 2013, I like everyone thought the same thing -- this is a MAJOR game changer.
It is now 2022. As I look back, FontAwesome has become unsustainable.
I'm officially 'done' with FontAwesome.
Credit where credit is due
I know this is a 'complaint'-style post.
(There's a lot of toxicity in software development) [https://jamie.build/dear-javascript.html]. This post is full of emotion (and contributes to that toxicity).
But credit where credit is due.
FontAwesome solved major problems with icons. The team worked really hard over the years.
We stand on the shoulders of giants.
But as we continue moving forward in web development, I'm sending FontAwesome into the 'thank you for your service' graveyard, along with jQuery, Bootstrap, Foundation, Gulp, and Sublime.
Additionally, the bulk of my complaints is the css portion of it. 90% of fontawesome projects I've worked in over the decade of development imported it this way.
Using FontAwesome as single file svgs, which is my current preferred way of importing icons, mitigates all of these problems. (Which then begs the question, "Why even use Font Awesome?")
Problem #1 - version nightmare
If you were building a website in 2018, you may have used FontAwesome 5. Set it and forget it, right?
Let's say you need a gameboy icon. Here is one!
<i class="fal fa-game-console-handheld"></i>
But it doesn't work.
Here's all the reasons why.
REASON 1: You're on FontAwesome 5.0. And this is on FontAwesome 5.11.0.
REASON 2: This is a 'pro' font. You're using a free version.
REASON 3: You've been importing solid versions of fonts. You should You need the light versions.
So not only does FontAwesome have minor versions, it also has variants! There's regular versions, light versions, solid versions, duotone versions, brands... all in separate files, with separate markup.
This juggling of version and variant, if it's Free or Pro, and which of the many different files continues in FontAwesome 6.
Problem #2 - Massive font set
FontAwesome's strength is the range of icons.
- FontAwesome 3 - 321 icons (https://fontawesome.com/v3/icons/)
- FontAwesome 4 - 675 icons (https://fontawesome.com/v4/icons/) FontAwesome 5 - 7,864 icons (https://fontawesome.com/v5/icons/)
- FontAwesome 6 - 16,000+ icons (https://fontawesome.com/search)
How many icons are you really using on your site? Maybe 6 or 7?
Most sites (and I'm speaking from my own background) only use a handful of icons, like magnifying-glass or circle-question (https://fontawesome.com/icons/circle-question?s=solid) or social media icons.
If you're importing a fontAwesome's regular.css, you're bringing in hundreds of fonticons you don't need. It's even more nightmare-ish if you're getting a circle-question icon (which lives in regular.css) AND a Facebook icon (which lives in brands.css). Now there's thousands of fonts imported... all eating bandwidth. Yum.
You want to a few icons on your site? Gotta import the massive set of files.
Defenders may say, "Well you can tree-shake it" or "optimize it".
And you're right! So... how many devs even know to do that or have the gumption to set that up?
TailwindCSS includes the entire kitchen sink as well. But they also include helpers to prune it all so you ship the absolute, smallest most performant css you can.
Problem #3 - Fonts first
A major problem with font icons is that you're treating them like fonts first, not icons.
You want a horse icon to be 100px wide.
This won't work:
.fa-horse {
width: 100px; /* does nothing */
font-size: 100px;
}
Instead, you have to fiddle with this using font-size.
See the Pen Untitled by rockykev (@rockykev) on CodePen.
That also means these icons are also affected by other css text modifiers, like line-height.
Are you screaming yet? π±π±π±
Problem #4 - Changing APIs
Let's use a real example.
You have a feature for visitors to leave a review - a simple leave a 1 to 5 star review.
Here's how to do that, depending on the FontAwesome version.
// FontAwesome 3
<i class="icon-star"></i>
// FontAwesome 4
<i class="fa fa-star" aria-hidden="true"></i>
// FontAwesome 5
<i class="fas fa-star"></i>
// FontAwesome 6
<i class="fa-solid fa-star"></i>
Starting to see the problem?
If I wanted to upgrade FontAwesome 3 to FontAwesome 6, I'll have to go find all the markup and fix that.
Worst, try juggling multiple projects with multiple different versions of FontAwesome. It's a nightmare.
Problem #5 - Locking you into the model
The last problem is that Pro is yearly.
If I have FontAwesome 5 Pro, which I purchased in 2019, and I wanted a Tiktok logo, I'll have to either:
Option 1: Keep FontAwesome 5 Pro and also include FontAwesome 6 brands
Option 2: Buy FontAwesome 6 Pro.
Just to get a TikTok logo, I now can either fracture my versions or pay $99.
Summary
All of these problems do have workarounds. The thing is -- all these problems are strictly from using FontAwesome!
Instead, switch to SVGs. Boom! All the 5 problems disappeared. (And devs have been [banging their drum (2015 article)]...(https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/) to leaving icon fonts (2021 article) for years...)
There's plenty of sites to score free SVGs or to buy SVGs. And SVGs are performant and AMAZING. (Animated SVGs, wow!)
After years of FontAwesome, I'm done.
Thank you FontAwesome for your service. It's time to go.
Top comments (8)
I think the biggest problem with things like FontAwesome is that they could be used effectively, but what most people ended up doing was scattering non-semantic
<i>elements and so forth across their site. Accessibility was never even an afterthought, and it's a very good thing that people are stopping using this approach.It seems a little unfair to negatively review FontAwesome (FA henceforth) based on improper or impractical implementations, right? That would be like giving negative reviews to a toaster manufacturer because lots of people set up their toasters in their bathrooms (and were met with unfortunate accidents). Itβs not a failing of the manufacturer.
FA can be implemented in many ways such as using Kits, downloading and hosting the SVG files, and my personal favourite: importing FA npm package into your project and using the Library for selective icon importing.
No one should be linking the entire FA CSS files in production (unless youβre happy to accept the pitfalls that go along with it). But to be clear: this is not the optimum nor the recommended implementation approach, and as such, shouldnβt be used as the yard stick to measure the practicality of FA.
Addressing your points:
Point #1: Version nightmare
If implemented as an npm package, a quick update to your packages will provide you with all the latest icons.
Run your npm update command against your FA packagesβjob done.
When searching for icons to use on the FA website, just click on the βFreeβ filter so you only list the icons available to your projectβno problem-o.
So then install the light npm package and import the iconβeasy.
Problem #2 - Massive font set
Again, if set up as intended, only the very few imported icons you are actually using (and their supporting CSS styles) are added to your final transpiled build files.
Iβm glad that you agree that the defenders are right. Also, how many developers know how to properly set up their FA installs and have the gumption to do so? Youβre taking a pretty broad swipe at the dev community here with this assumption, as if this is some Herculean task beyond the understanding of most devs.
Your comparison to TailwindCSS is moot, given that FA provides the same optimisation options out of the box, provided your chosen implementation method supports it.
Problem #3 - Fonts first
FA uses the font-size property because the icons are sized relative to the content and UI elements surrounding them. When you place a contextual icon next to your button label, itβs great that the icon will automatically match its size with that of the button label text.
A quick skim over the documentation will tell you everything you need to know about sizing your icons, no screaming required.
Problem #4 - Changing APIs
If someone is using FA3, sure, they would have to do that.
However, from FA4 and up, backward compatibility is built in. You can upgrade your FA4 or FA5 project to FA6 without having to make any changes to your markup.
If you check out the βBackward Compatibilityβ section of the βWhatβs Changedβ section of the FA docs, youβll find that the use of the old style syntax (and even old icon names and Unicode values) are supported out of the box.
Problem #5 - Locking you into the model
Perhaps your choice of a TikTok icon was a mistake, because that falls under their βbrandsβ style which is free to use, no payment required. But I understand your point: what if you have FA5 Pro but the icon you want to use is in FA6 Pro?
The answer is easy: just use FA6 Pro. A pro plan with FA means you can use any icon in the latest version of FA, always. So when FA7 inevitably gets released, youβll get access to those icons too, no plan upgrade or additional payments required.
Summary
This is almost true. I would go further to say that βall these problems are strictly from implementing FontAwesome in an inefficient mannerβ.
When used properly, FA provides you with lean, accessible, scalable icons for your projects. Unfortunately, your post conflates the issues present in bloated and βquickβ implementations with the service as a whole, which I feel misinforms people of itβs great many utilities when used appropriately.
Remember: Always import your icons and tree-shake your project, and never make toast in the bath.
Heya! You're totally right. I actually point that out before I start listing my grievances - that my preferred method is through svgs and through npm packages.
All of those solutions is if you have the luxury of doing that from the start.
I inherit a lot of old projects, and hence my frustration. (love the toaster metaphor)
Also, I noticed your comment is pretty long! Do you want to shape it into a separate blog post and do a counter-post? I promise I take no offense, and it'll be like a rap battle in blog form. :-)
I can absolutely appreciate your position. Inheriting technical debt just compounds your workload. And of course, you have to make that βrefactor or leave itβ decision (if you have the luxury), which you know is going to impact the next web dev one way or another.
Great minds must think alike, because I already spun-up a counter-post! π
Iβm glad to hear you took my comment as it was intendedβnot as a personal attack, but as a rebuttal of your position. All too often (especially online) our words get taken out of context and perceived as an attack to be offended by. Grateful to see we can still have rational, mature discussions in 2022. π
I moved some years ago on Fork Awesome. This library of icons is litteraly a fork of Font Awesome with more OSS icons like Mastodon, DEV, GitHub, GitLab etc.
I prefer using this fork because :
fab fa-tree.Beautiful! I never heard of Fork Awesome! Thank you for the recommendation!
Always room to improve.
True