How To Add and Use Font Awesome For Blogger

How To Add and Use Font Awesome For Blogger. Nowadays, many blogger design supported by Font Awesome. They add font awesome in Menu, Blog Post, Footer etc. Before explaining the function of font awesome, I will give definition about Font Awesome itself. Font Awesome gives you several icons that can be customized instantly and easily. You can customize size, color, and anything that can be done with the power of CSS. By adding this one, you can change the image with font awesome as a replacement. There are many interesting icons that can be used on your theme. it's depend on you, which one is better for you and appropriate for your theme. I really suggest you to add the CSS of icons for giving best result.

If you interested to add Font Awesome for your website.Be calm, it's really easy to apply on your HTML Template. As a first step you should add the CSS below above </head>.

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

You have been successfully add the CSS of Font Awesome. Now, How to apply it on your HTML Template or Post? let's continue reading this tutorial. To apply this one is very easy for example : you can add icon 'Home' and 'Phone' by adding code like this one.
The code

<i class="fa fa-home"></i>
<i class="fa fa-phone"></i>

Result

For changing the size you can add the code like below for giving different size and increase them.
The code 

<i class="fa fa-comments fa-lg"></i>  example : fa-lg
<i class="fa fa-comments fa-2x"></i> example fa-2x
<i class="fa fa-comments fa-3x"></i> example fa-3x
<i class="fa fa-comments fa-4x"></i> example fa-4x
<i class="fa fa-comments fa-5x"></i> example fa-5x

Result
example : fa-lg
example fa-2x
example fa-3x
example fa-4x
example fa-5x

For adding color on your font awesome you can choose the code below.
The code 

<i class="fa fa-comments-o fa-4x"></i> example fa-4x
<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#587CA2;}
}
</style>

Result
example fa-4x

Advertisement