Font icons are used to replace the images in web designing. Its nature is same like the nature of a text or font. All the attributes of a text can be applicable on this icon. Font icon makes your website structure quite attractive and context relevant.
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:-
To add facebook font icon, use any of the following class code
To add twitter font icon, use any of the following class code
To add google plus icon, use any of the following class code
To add flickr icon, use the following class code
To add linkedIn icon, use any of the following class code
To add youtube icon, use any of the following class code
To add tumbler icon, use the following code
To add tripadvisor icon, use the following code
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.
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.
Step 01: Login into your blogger dashboard>>template>>edit html, find the </head> tag and paste the following css link just above it.
<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>
To add pinterest icon, use any of the following class code
<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.
Post a Comment