How to use Font Awesome icons to blogger blog

as we all know, the site with high speed ranks better in google. some tactics to speed up the websites are..

use better web hosting, cache set, image compression etc. but if you are running a blogger blog and want you done all the above steps to speed up your site then here is the last level optimization. you can use vector icons instead of image as icon to reduce the load in your blog. and hence you can enhance your performance.

so today we will talk about how to use Font Awesome icons to any blogger blog.

Introduction to Font Awesome icons:

use font awesome icons to blogger

Font Awesome icons are vector icons that load faster and you can use it by simply defining a class. yes, no need of <img> tag. just include the relative icon’s class and there it will appear. Font Awesome icons are the set of icons covering almost all kind of required icons and they are not image files but CSS file. you can tweak these icons to some cool effects like change color, animations etc.

 

you can use them by simply include the CSS in your website. but what if you have a blog in blogger ?

let’s check how to set Font Awesome vector icons in blogger.

there are 3 methods to do it.

1. Hosting your own Font Awesome icon CSS file.
2. Import Font Awesome CSS to Blogger.
3. Optimize Font Awesome CSS Delivery.

 

1. Hosting your own Font Awesome icon CSS file

Blogger platform provides facility to host your CSS or JavaScript to your Blog directly.

With help of this, you can also host all your Font Awesome icons to your Blogger Blog and Boost speed of website/blog.

follow below steps:

  • go to   Blogger.com>>Theme>>Edit HTML (Full code will be display)
    click on any line of code to bring focus to code.
  • Then press CTRL + F.
    Search : ]]></b:skin>
  • Paste below given  code exact above  ]]></b:skin>  and  Save the template.

 

2. Import Font Awesome CSS to Blogger.

as we discussed in first method to directly host your Font Awesome icons to Blog, the drawback is that the Font Awesome icons are dynamic CSS script and updated regularly.so to get updated Icons, you can use this second method of Importing Font Awesome CSS directly to blogger.

the drawback of this method:-
it will increase page load speed because it acts as a rendering blocking CSS.

still if you want to follow this method then, do below steps.

  1. Go to Themes>>edit HTML.
    again, CTRL + F
    search for <head>
  2. Just after <head> tag, page below code and save the Theme.


So these are two technique you can use Awesome Font vector icons in your Blogger Blog and make it looks more attractive and professional.

Add Comment