FontAwesome 4 has been around a long time, and it's…well, awesome! Remember their Kickstarter with those videos? Well FontAwesome 5 is out now, and as promised, it has some big improvements. But to get the benefits, you'll have to work through some breaking changes. Here's what I learned from my upgrade.
Let's start with a simple page with 3 icons using Font Awesome 4.
The big improvement in FontAwesome 5 is that the icons are drawn with SVG now. Yay for sharp scaling up or down! Now you reference a JavaScript file with the SVG specs embedded in it instead of a CSS file. I'll change the pen to remove the CSS reference and add the JavaScript reference from the CDN:
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
Then check the results:
You can see the icons, but they changed a little. The calendar is very dark, and the arrow is a little more narrow. That's because the way you reference the icons has changed in version 5. Instead of fa as a style preceding every icon style, you need to pick from fas for solid, far for regular, fal for light, or fab for brand. It looks like fas is the fallback, so you get solid if you leave your old fa references. For most icons, this change makes the icon heavier or lighter.
If you are biting your nails thinking of all the places you have icons that will now need to change, you can upgrade to 5 and use a shim.
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/v4-shims.js"></script>
But if you've got the time and the inclination, skip the shim and change your icon classes to take advantage of the new, lighter styles. If I change all the icons in the same from fa to far we get this:
That's one of the other big changes. FontAwesome has lots more icons, but to get all of them, you'll need to buy the PRO version starting at $60 for 5 seats. I think that's a good deal, but the old icons are still free if you only need those.
Finally, some icons changed names, and you'll need to swap them out if you don't want to use the shim.
