Utilizing Font Awesome in your Web Developement

There is a great icon font library out there called “Font Awesome”. It has a large list of icons (over 400 at the time of this posting), and they are all scalable to any size. We utilize this font all the time at Powderkeg, and I am going to show you how you can utilize it as well.

Quick Start

1. The quickest way to get this working is to link to the Bootstrap Contend Delivery Network (CDN) link that houses the fonts. Simple open a new web document, and in header you will want to paste in the follow link:
   
   PHP

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

   1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

   
   This allows you to reference the fonts from an external source. Ideally you will want to download the fonts and put them on your server yourself. (See more here)
2. Now you just have to put the font icon on your page anywhere you want with this tag: <i class="fa fa-picture-o"></i>. It is the classes that determine what icon is displayed. This particular one is an icon of a picture:
   For a complete list of all of the different icons you can choose, click here. You will be able to style it just like you would any other font. That means you can give it a font size and font color to match your theme.
3. As an added bonus, you can also call a Font Awesome icon through pure css via unicode. To do you that, you will want to make use of the :after and :before pseudo classes that css offers. As an example, consider the following markup:
   
   PHP

   <div class="fb><a href="https://www.facebook.com/powderkegwebdesign">Find Us On Facebook!</a></div>

   1	<div class="fb><a href="https://www.facebook.com/powderkegwebdesign">Find Us On Facebook!</a></div>

   
   This by itself won’t do anything other than create a link. However, if you add the following css:
   
   PHP

   <style> .fb a{ color:#fb7932; } .fb:before{ color:#fb7932; content:"f082"; font-family:'FontAwesome'; font-size:18px; margin-right:10px; } </style>

   1 2 3 4 5 6 7 8 9 10

   <style> .fb a{ color:#fb7932; } .fb:before{         color:#fb7932; content:"f082"; font-family:'FontAwesome'; font-size:18px; margin-right:10px; } </style>

   
   You end up with a link to your Facebook page with a nice, scalable icon to the left of it.

   

Font Awesome can be used in a wide variety of ways and is very versatile. I am yet to run in to a situation where I need an icon and there isn’t one readily available from there. Another bonus to using this font is that Web Designers can incorporate them in to Photoshop and Fireworks as well. The only things you have to do is install the fonts from the Font Awesome website and use the cheatsheet to copy and paste the icons right in to your designs. Voila! Perfect synergy between Design and Development.