Changing Font Awesome version 3 to 4

Font Awesome 4

I’m a huge fan of icon fonts, and Font Awesome is the best one. Version 4 is out, and if you are updating from version 3, here’s what you need to know.

Font Awesome 4 has been completely rewritten, so if you are migrating a project from version 3 to version 4, you will have to make some changes.
First, swap out your old css/less/sass files containing all the font awesome code for the new ones, or just change the CDN reference to this:
[html][/html]
Next, replace the old font files with the new ones. Those would be the “fontawesome-webfont.eot” and other files, here’s a link.
Lastly, you’ll have to replace any old references to [css]icon-*[/css] with [css]fa fa-*[/css]. Other attributes like icon-large will also have to be changed.
Here’s the old syntax:
[html][/html]
Here’s the new syntax:
[html][/html]
That should take care of it, enjoy!

3 comments

  1. Thanks for the article!
    I’m afraid there’s much more to be done to port 3 to 4, a lot of names changed… like icon-signout to fa-sign-out and -sign became -circle.

Comments are closed.