How to Add Font Awesome Icons in Bootstrap

By 08-07-2013   BloggingSite NewsTwitter

We added Font Awesome icons to our Twitter Bootstrap installation. Though Glyphicons provided amazing icons, they still need to load a CSS sprite with those 160 images. How would if be if you could add an icon font to display those icons and then scale them to any size just like fonts, while maintaining the sharpness and clarity of the icons.

Font Awesome for Bootstrap

font awesomeFont Awesome promises to do just that and is an iconic font designed specifically for Bootstrap. It displays scalable vector icons that can be easily customized to any size, color, shadow, transition – just as a font can do. The possibilities are endless.

Easy Code – The way to insert icons is also the same as for Glyphicons with an i code. Its is simply the easiest way to insert icons as you juts need to know the icon class from the huge list on their site and its done in seconds.

In addition you can have more fun with stackable icons (one icon superimposed over the other!), rotating and flipped icons (just by adding CSS class!), icon lists etc. and all with a simple CSS class addition, changes which seem semantically valid too. Its is indeed the best way to add icons to any site.

For example this simple code will insert a huge flag, 3 times the font size and align it left.

<i class="icon-flag icon-3x pull-left"></i>

No Images – Have a look at all the icons – large and small,  across our site – they are all powered by Font Awesome. Did you notice the cool Social icons on the top – see the screenshot

social icons in fonts

… though they seem too large to be icons, believe me they are a font and have no images as CSS background! And this seems even better than pure CSS social buttons.

Again you can add as many icons as you want, as once the font file loads, you can add icons of any size or color anywhere in your web design.

Easy Font Awesome Installation

As we continue to develop with Twitter Bootstrap, exciting new features are coming forth. Again we find that BootstrapCDN provides full CDN support for Font Awesome. This means its just a cut and paste of code, to replace some Bootstrap CSS.

BootstrapCDN provides CSS files without icons. So you can add the ‘Complete Bootstrap CSS Without Glyphicons Icons’. This file also combines the Bootstrap CSS with the Responsive CSS, so you get only one CSS file! Then add the Font Awesome CSS file and you are done. You do not need to mess with the Bootstrap JS files. They have an IE7 compatibility support CSS file also but this is optional.

Which means you just need to add these CSS files, and remove the older Bootstrap CSS files (you have Bootstrap javascripts already installed)

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

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

So get Font Awesome and power up Twitter Bootstrap even further.

Update: You can also add Font Awesome to any site without Twitter Bootstrap.

5 comments on “How to Add Font Awesome Icons in Bootstrap

  1. Patricia J. Wilcox says:

    When you are seeking standard icon images, such as for vehicles, certain punctuation characters or graphical charting icons, icon fonts can offer you scalable images that look the same irrespective of the size of the font. This is just as letters and numbers appear the same irrespective of whether you use a size 2 or 5 or a 10 or 24 point font size.

  2. Hyptia says:

    This idea is good to take much more advantages and beside that you can attract visitors as well for your site/blog.

  3. Elaine Christian says:

    I’m using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.

  4. Lefty Shoppe says:

    These fonts are pretty awesome, thank you!

Leave a Reply

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

*