Blogger Ever

How to use Font Awesome Icons using three different ways?

Font Awesome provides a massive collection of 479 icons. That includes almost all possible icons that can be used on web or app. Let see how to use them in Blogger.

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
}
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.