Font Awesome 4

Changing Font Awesome version 3 to 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:
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:
Here’s the new syntax:
That should take care of it, enjoy!






3 responses to “Changing Font Awesome version 3 to 4”

  1. Enrico Avatar

    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.

    1. Scott Avatar

      Thanks for the tip Enrico!

  2. Jroc Avatar

    someone should write a php find/replace script for this! would be really helpful.