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 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
… 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.
<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.