How to use Font Awesome Icons using three different ways?

Fonts are more than only Typeface, they provide variety of uses that includes the icons. Icon fonts are supported in IE6 even. However, using font icons also have some demerits like fonts are loaded cross domain which could lead to load failure if server is down or some other issues. Perhaps I still prefer to use icon fonts as they are easy to use and implement.

Font Awesome icons provides the giant collection of 479 icons that includes every possible icon for the use of web or app. Have a look on how to add Font Awesome Icons in Blogger.
Add the following code below head

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

Now wherever you want to implement any font icon then prefer this cheat sheet. In this cheet sheet you will find Class Names and Uni-codes of each icon.

Using Class Name technique

This technique is most easy to use, all you need to add the class name of that specific icon in <i> tag and let it go.

HTML

<div class='contact-mail'>
<i class='fa-envelope'></i> Contact Me Via Email
</div> 

CSS

.contact-mail{
font-family:FontAwesome
}

Using Uni-Codes 

If you do not want to use <i> tag for some reasons then Uni-odes are codes used by in HTML to represent the font icons. Then following will be the code:

HTML

<div class='contact-mail'>
&#xf0e0; Contact Me Via Email
</div> 

CSS

.contact-mail{
font-family:FontAwesome
}

Using CSS Pseudo Elements

This method is also an option when you want to add these icons using CSS. Use this cheat sheet for CSS hex values. Use the following code:

HTML

<span class='contact-mail'>Contact Me Via Email</span> 

CSS

.contact-mail:before{
content:'\f0e0';
font-family:FontAwesome
}