How To Use FontAwesome Icons In Blogger Template

SHARE
FontAwesome icons as name suggests, are awesome and piece of cake for all designers. You can use these icons on your blog, web apps, graphic designs and much more. These icons are extremely useful and that is why these icons are being used by many people day by day. By now most of the popular bloggers are using these icons on their blogs and apps. These icons are getting more popular every next day. So what are these FontAwesome icons, how you can use and what will be the benefit of using these icons to you is what we are going to explain in this tutorial.

1. What are these FontAwesome Icons?

FontAwesome Icons are vector icons means these icons are scalable to any size and display perfect in high resolutions.

2. Can we customize these icons on our template?

These icons can be customized in size, shadow, color and everything which can be achieved via using CSS font style. All you have to do is add these styles to your blog template CSS stylesheet using class "i".

3. Is any JavaScript required to get these icons work on my blog?

That is the beauty of these icons that you need No JavaScript code to get these icons work on your blog. No more load time and works on all devices perfectly

4. Are these icons free or premium?

These icons are totally free for use in any way (personal or commercial use). Good deal, no?

5. Why should I use these icons? Why not PNG or other images?

This is the excellent question and answer is Awesome. These icons load with 10x speed than your PNG or other image files and minimize the number of HTTP requests of loading images on your blog. These icons load as other text/fonts of your blog. Ultimately they boost the loading speed of your blog, gains more visitors, gives awesome look to your blog and help you in blog SEO in a way or other.

How To Use These Icons On My Blog?

To use these icons on your blogger blog, you need to edit template just a little. Go to Blogger → Template → Edit Template → Click Inside Code (backup your template code before editing by copying code to notepad). Now press Ctrl+f or Cmd+f then search for <head> tag and after this <head> tag paste the code given below.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 Above code is the CSS stylesheet of FontAawesome icons. Now you can place any icon to appear anywhere with simple <i> tag in your HTML e.g. inside <div>, <a>, <li> or <p>. See the example below how we used icons in our navigation menu links.
<li><a href='http://www.twistblogger.com'><i class='fa fa-home'></i>Home</a></li>
<li><a href='http://www.twistblogger.com/p/contact-us.html'><i class='fa fa-envelope-o'></i>Contact Us</a></li>
To change/use another icon just replace the icon name in yellow color <i class='fa fa-home'> and icon's name are given above every icon here at FontAwesome Icons Page. Just replace the icon name in yellow with your choice. For example <i class='fa fa-laptop'>. See image of few icons with their name highlighted below. First fa remains same and second comes with icon name.


Customization of Icons With CSS

To customize the color, size, shadow and background, just call the (i) tag in CSS and paint these icons with your creativity. CSS code is given below to simply copy paste and customize. Copy the above code and paste it just before the ]]></b:skin> code line.
i {
    color:#E2FD18;
    font-size:15px;
    padding-right:5px;
    text-shadow: 1px 1px 1px #000;
}
 This above CSS effect will apply to every icon on your blog. But what if you want to give different color, size, shadow etc. to a specific icon? Do not worry, you know what? These are awesome icons so here is the another hack for you. If you want to give separate effect to a icon than others' then you need to apply style inside the HTML <i> tag. Here is example:
<i class='fa fa-heart' style='font-size:18px; color:red;'/>
 After applying the above style inside the HTML <i> tag, your icon size would be 18px and color red while other remains same as per the effect you applied by CSS to (i) tag. Anytime if anything goes wrong, let us  help you. Thank You.

Note:- These icons doesn't work in IE6.
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

6 Replies so far - Join Conversation

  1. Where are the list of all the icons? Or I did not understand :( Could I use this for my blogger posts?

    ReplyDelete
    Replies
    1. George Zuko :: Hello Buddy, all the icons list is available here = Icons List
      Yes you can use them on your blog posts too.

      Delete
  2. I did it in my website. But actually I modified my code color to blue and its great. Hopefully apart from templates, all the customization done to my blog with the help of your tutorials.

    ReplyDelete
  3. Thanks Satbir for this awesome post. I have integrated these icons on my blog. I have a query, Can I contribute to your blog via a guest post?

    ReplyDelete
    Replies
    1. VIPIN:: I Don't accept guest posts at the moment.

      Delete