I have been using Font Awesome over the last year for all my web projects. It's goal is to do away with all the images that you need for a modern web application and replace them with a single font.

Why replace images with a font you may ask?

There are several advantages:

  • Fonts are scalable, so they look crisp at whatever size you want them
  • You can use all your font styles on these icons to style them (like size and colour)
  • All modern browsers support the download of custom fonts (there is a fallback to image sprites for old browsers)

Using it on your project is easy, just add the following stylesheet to your app:

 

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

Then you have access to over 350 icons. Here are a few that I use all the time: 

The HTML is easy, just <i class='icon-edit'></i>, <i class='icon-trash'></i> 

You can then add modifiers to control the size, rotation and even animation of the icon

  • <i class='icon-cloud-download'></i>
  • <i class='icon-cloud-download icon-2x'></i>
  • <i class='icon-cloud-download icon-3x'></i>
  • <i class='icon-cloud-download icon-4x'></i>
  • <i class='icon-cloud-download icon-spin'></i>
  • <i class='icon-cloud-download icon-rotate-90'></i>

Since it's a font, you can change the colour, simply by applying the "color" css style

You can even combine icons together: 

combined with makes 
<span class="icon-stack icon-4x">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>

These icons also play nicely with Twitter Bootstrap. Here is a practical example where you change the save icon to a spinner to indicate the AJAX call is being made. Click the "Submit Changes" button to see it in action

<button id='submitButton' class='btn btn-default'><i class='icon-save'></i> Submit Changes</button>
 
<script type='text/javascript'>
  $(function() {
    $("#submitButton").click(function() {
     $("i", this).attr("class", "icon-refresh icon-spin");
      setTimeout(function() { $("#submitButton i").attr("class", "icon-save"); }, 2000);
    });
  });
</script>

You can use these icons to spice up your forms: 

<form>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email address">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-key"></i></span>
    <input class="span2" type="password" placeholder="Password">
  </div>
</form>

This library is a must for all web projects :) 

Comment