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:

<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!


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  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.

    Reply

    1. Thanks for the tip Enrico!

      Reply

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

    Reply

Leave a Reply

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

Being a business owner is hard. I'm trying to get better in business and life, enter your email if you want to join me.
Holler Box