Font Awesome 5 was just released today. But it's much more than just an icon-font - here's what you need to know.
Icon-Fonts use has Changed
I believe we've all worked with icon-fonts, and after an initial learning curve we kind of figured it out. But the web has changed a lot since then, and needs changed.
8 Problems we had with old-style icon-fonts
- Glyphicons - the famous icon-pack included in Bootstrap 3 (but not BS4) always needed 2 classes to add, so you had to create a <span class="glyphicons glyphicons-up"> to make it work. That is still common today, though it's just an unecessary hassle, thanks to now widely supported CSS3.
- Font-packs grew larger and larger, and suddenly started slowing down websites which needed only 5 icons, but always downloaded the font with 2'000 icons
- Font-icons were an important solution to "bundle" small icons together, because many small requests slowed down the page dramatically. But this is becoming obsolete, thanks to HTTP2.
- Every icon-font was always missing 1-2 icons, so people would start using multiple libraries, slowing down the site even more, and causing various issues like icon-class-name collisions.
- When using icon-fonts with screen readers, this cause issues because internally the icon was just a cryptic, japanese or mongolian character number, which the screen reader couldn't interpret.
- When using icon-fonts in desktop solutions (Photoshop, Illustrator, etc.) it was very hard to pick an icon, because they didn't have ligatures (nice names)
- As online typography matured, many new needs arose like professionally created bold-styles (so no the crapy just-make-the-line-thicker stuff)
- As screens got better, small icons looked bad on high res, and high-res icons looked bad in tiny scenarios.
- we now want to package our own custom icons-fonts at dev time (making smaller, custom icon libraries)
- in many scenarios we prefer SVG icons to font-icons
Font Awesome 5 for 1'000'000 USD
That's right: the most popular, free icon-library raised one Million dollars on kickstarter to fix all these things, and open-source all the tools they developed in the process. How awesome is that? Here's the link BTW.
So what did they do that is so awesome?
- they designed all icons in a top-notch manner, providing every icon in the correct typographic version incl. solid, regular, light etc.
- they added ligatures to all icons, so that screen-readers (accessibility) and desktop-designers could finally use them in the right way
- provide everything in font-format, as well as SVG
- gave us all a free CDN for people who want to use the whole font
- ...and way more
Kudos to the FontAwesome team
You did an amazing job, and open-sourcing your work will help other fonts to quickly achieve a similar level of professionality. You guys rock!
Love from Switzerland,
PS: Read more about font-icons in our blog posts.