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:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">

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

icon-*

with

fa fa-*

. Other attributes like icon-large will also have to be changed.

Here’s the old syntax:

<i class="icon-cog icon-large"></i>

Here’s the new syntax:

<i class="fa fa-cog fa-lg"></i>

That should take care of it, enjoy!

3 thoughts on “Changing Font Awesome version 3 to 4

  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.

Leave a Reply

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