Icon fonts can be an essential tool to any UI Designer.
Think Dingbats but for the modern web. Icon fonts are not only simple to
implement, but load quicker than images, can be re-sized and colored like
normal text fonts and can be created based on images. Along with these obvious
advantages to using them, there are some less obvious qualities that developers
appreciate. Icon fonts do not require JavaScript, so there is no need to be
concerned with compatibility issues. They also play nice with almost any
framework, are fully able to be manipulated by CSS and are completely free for
commercial use.
_____________________________________________________________________________________
How to implement Font Awesome:
1. Paste the following link into the
<head> of the HTML page:
<link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">
2. Choose which icon you’d like to use
3. Place the “i tag” with the specific icon
you want in the spot you’d like the icon. For example:
<i class="fa
fa-camera-retro"></i>
The tag above has the class
“fa-camera-retro” on it, which would print 
on
the page.
_____________________________________________________________________________________
Along with choosing a specific font icon you want to use,
there are classes you can add to any of the icons that add certain effects.
These effects are built-in, but you can always use CSS to color, precisely
size, move icons. Some examples below:
fa-2x, fa-3x, fa-4x, fa-5x : increases
icon sizes relative to their container
fa-fw : sets a fixed width on the icon
fa-ul and fa-li : replaces default
bullets in unordered lists
fa-spin : gets any icon to rotate (not supported by IE8 or 9)
Examples of Font Awesome in action: