Font Awesome: a great alternative to image icons

Font AwesomeFont Awesome is a collection of “scalable vector icons that can instantly be customized” with CSS.

Installation is quite simple. Just drag the font files to your web site’s asset directory, add the included CSS file to your CSS directory, and update the file path to the fonts.

Once installed, you can call any icon within the collections by using a class name or calling a unicode value in your CSS file.

Adding an icon via class:

Adding an icon via CSS:

Once you’ve added your icon, you can customize its appearance using CSS.  Color, size, drop shadow, margin, padding – all can be defined within the stylesheet.

Here are a few examples: