Using Font Icons: Font Awesome

Take advantage of the excellent free font-icons that come bundled with Twitter Bootstrap – even if you’re not using Bootstrap!

The font-awesome icon set is available as a font. You can find more info about font-awesome here:

To get started, add the following to your HTML head:

<link href="//" rel= "stylesheet">

You can then add icons from the font-awesome set. Paste icons into your HTML editor in this format:
<i class="fa fa-camera"></i>
This displays a camera icon: .

It’s easy to display icons at different sizes:

<p><i class=”fa fa-coffee fa-lg”></i> fa-coffee – 33% bigger</p>
<p><i class=”fa fa-coffee fa-2x”></i> fa-coffee – 2 x bigger</p>
<p><i class=”fa fa-coffee fa-3x”></i> fa-coffee – 3 x bigger</p>
<p><i class=”fa fa-coffee fa-4x”></i> fa-coffee – 4 x bigger</p>
<p><i class=”fa fa-coffee fa-5x”></i> fa-coffee 5 x bigger</p>

Results in this:

fa-coffee – 33% bigger

fa-coffee – 2 x bigger

fa-coffee – 3 x bigger

fa-coffee – 4 x bigger

fa-coffee 5 x bigger

You can find the full list of icons here: There are a wide variety of icons, including directional symbols, currency symbols and brand icons. Check out the Facebook “f” in a variety of sizes:


Get creative with lists, by replacing the default bullet:

  • This list…
  • Has interesting icons
  • From font-awesome
  • Replacing the default bullets

In this case, CSS has been tweaked like so, to remove the default bullets for the fa-ul class and position the new icons properly:

.post_box ul.fa-ul { list-style-type: none; }
.post_content .fa-li { top: 5px; }

Because they display as fonts, you can style the icons with CSS font-styles. For example, here’s a purple coloured briefcase icon that transitions to bronze over 0.8 seconds when hovered:


Related Content