Font Awesome is a popular iconic fonts for designers. It lets you add various icons in your web page quickly. Special thing about Font Awesome is that it does not use any kind of image in the icons. You can easily customize these icons to change size, color and other things you want. As of now, there are around 400 icons of various categories. Most important thing about Font Awesome is that it comes for free. Latest flat design comes with these icons and it really looks cool. So, you may want to use these icons in your blogger templates too. If you are willing to use Font Awesome icons in your blogger blog, read the full tutorial.
It is worth to note that it does not support IE7 and older versions.
How to Add Font Awesome Icons in Blogger
Adding Font Awesome in your blogger based website is very easy. You just need to include few files and you are done. Follow the steps given below:
Step 1: Open the blogger and go to templates. Here edit the template to add the below line inside the <head> tag of the template.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Now, you have successfully installed font awesome in your blogger blog.
Step 2: Now you only need to include <i> tag with specific class to include icons. Suppose you want to add camera icon, add the following code:
<i class="fa fa-camera-retro"></i>
You need to know the icons’ classes. See the list of all icons and respective icon class here.
Applying custom CSS to icons
You can change the color, size and other properties of icons by using custom CSS. The method is simple. Add CSS code in the header section of the blogger blog inside CSS section. See the following example:
If you face any problem. have confusion or want to share your thoughts, add your comment below.