11 Things to Know When Upgrading to Font Awesome 4.0.0

I’ve been using Font Awesome in several projects lately, and was excited to upgrade to their latest release 4. It’s a really nice upgrade, with Bootstrap 3 and Foundation compatibility, a handful of new icons, and a new, more semantic naming convention. The upgrade was pretty smooth, but unfortunately I had to change the markup in a lot of my files. Thank goodness for global find / replace!

That said, they did say that “icons have been renamed to improve consistency and predictability.” That goes beyond the icon- prefix changing to fa-, so without further adieu, here are 11 icons for which the name changed, and required a bit of time to update:

Pre-4.0.0 Code 4.0.0
icon-signout fa-sign-out
icon-signin fa-sign-in
icon-upload-alt fa-upload
icon-plus-sign-alt fa-plus-square
icon-info-sign fa-info-circle
icon-question-sign fa-question-circle
icon-download-alt fa-download
icon-remove fa-times
icon-time fa-clock-o
icon-warning-sign fa-exclamation-triangle
icon-ok fa-check

Most of these made sense to me, but I was really stymied by the move from “remove” to “times”. Most of the time, I see an X online and think about deleting or removing something, not doing some math.

If you’ve come across other changes in your upgrade, please let me know and I’ll add them to the post.

Leave a Reply

Your email address will not be published. Required fields are marked *