First off, if you don’t know me then you might be offended or enraged by that statement. Please, keep reading.

Font Awesome is a truly great collection of icons that can be easily deployed with a simple CSS or JS include. A ton of work has gone into it to make it as small as possible and they’ve even encouraged use of things like subresource integrity which is just great to see. Font Awesome is truly awesome.

I guess to be fair, I don’t actually hate Font Awesome, I hate that people use it blindly.

Once again, if you don’t know me, I’m a penny pincher when it comes to HTTP requests, DNS lookups and bytes crossing the wire. When someone says “pull the data in with AJAX” I say “can you just inline the data on the server-side in a JS block?” When someone else says “here’s how to do something with jQuery” I’ll always come back with the vanilla JS version. Just load the jQuery from a CDN because the user might have it cached already? Nope, I’d rather host myself. One less DNS lookup and TLS handshake to worry about, not to mention a potential point of failure.

Back to Font Awesome, including it the way that most people blindly use it you’ll end up with a minimum of two calls, one for the CSS and one for one of the font files. But, how I usually see it is that someone wants a Twitter icon, and exclamation mark, and a check mark, which, if you don’t already know actually causes three font files to download! The Twitter logo is part of the brand fonts, the exclamation mark is solid fonts and the check mark is part of the regular fonts. In total you’ve added 150 KB to the page, just for those three icons that could have been inlined for probably 2 or 3 KB (and that’s not counting compression.)

Now, if you don’t care about 150 KB on your initial request, that’s fine, I’m not judging you. But 150 KB for X plus another 100 KB for Y starts to add up over time. And sites never shrink over time, they always grow. Tomorrow or next week or next year you’ll add a new feature which adds another 100 KB for feature Z.

My further hatred of how people use it, and you’ll see this very often in the WordPress world, is that every plugin requests their own copy of Font Awesome, some on version 4, some on version 5, so you end up with multiple downloads of Font Awesome. On a recent site we audited we found 500 KB of Font Awesome data on the home page! That’s half of a megabyte! For icons!

Anyone still reading? Probably not.

I just had to say something, it was bugging me. Font Awesome is a great way to get started for fast designs. It is also a great tool if you have dynamic or unknown data entering your site that you need to support. And further, if you defer or lazy load things you can ease the burden even more. But just don’t use it blindly.

On the off-chance that someone actually reads this I turned comments off because I don’t care, I just wanted to rant.