How to use font awesome's social font icons in blogger ?
Of course, you also use font icons into your blogger template. However, it consume a little time to load that font icon's script. In fact, font icon works by a css script. While you use a css script that reloads / renders the icons which contain in the .EOT, .SVG or WOFF files. There are many font icon generating script you can find. Among them, I mostly like the font awesome icons because it is very simple and easy to use.
The characteristics of font icons:-
- It is a scalable vector icon - Scalable means that you can increase and decrease its size giving its size.
- It uses all the attributes of <a></a> tag.
- Its weight and size is low; it does not consumes more memory.
- It does not take more time to load; it is like a text.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Step 02: Now, here are some classes of font awesome that generates the social icons. You just copy the following code accordingly into your blogger template.
To add facebook font icon, use any of the following class code
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>
To add twitter font icon, use any of the following class code
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>
To add google plus icon, use any of the following class code
<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>
To add flickr icon, use the following class code
<i class="fa fa-flickr"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>
To add linkedIn icon, use any of the following class code
<i class="fa fa-linkedin"></i>
<i class="fa fa-linked-square"></i>
To add youtube icon, use any of the following class code
<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube-square"></i>
To add tumbler icon, use the following code
<i class="fa fa-tumblr"></i>
<i class="fa fa-tumblr-square"></i>
To add tripadvisor icon, use the following code
<i class="fa fa-tripadvisor"></i>
In the above list, I have included some more popular social medias' icons. However, you can find many more font icons generated by font awesome from its official github page. If you have any problem while adding the following code, please inform us.