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.
<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
far we get this:
The arrow up icon flashes a question mark and an exclamation point. That means FontAwesome doesn’t have a regular icon named
fa-arrow-up. Well, it does, but if we look at the arrow-up regular style details, we see on the right side that this is a PRO version icon. I’m using the free CDN link for these icons, and it’s not in the free version.
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.