How To Use “Font Awesome Icons” in Blogger

Icons are awesome elements which makes beauty to all design including themes and templates. Icons are mostly used in all templates and most of them are used as images. So, the templates quality becomes low and the other template which use perfect icons gets high quality and experiences. Not only using icons in blogger template, you can even use them in your blogger blog. You ever thought about using icon in your blog? just say “No” to icon images and say “yes” to font awesome icons. Do you ever heard about Font Awesome Icons?

Take a look: How to Install Flare Social Sharing Widget on Blogger

What is Font Awesome icons

Font Awesome icons is a designer website or brand available for all designers. They can use all Font Awesome Icons for free. And this is so popular in WordPress and on other platforms. Every users are using this these icons and it make a common thing in their blogs. The most important feature here is, these icons will not reduce your blog speed. If you Icon images then it will reduce your blog speed. But these icons are not like that. They will be load quickly. You can get more than 370 icons which includes application icons, forms buttons, currency icons, editor icons, texts, brand icons, video player icons and more. And more will be updated in new version. It’ll be updated from 4.0.3 to a new version for free.

How To Use "Font Awesome Icons" in Blogger

If any blogger using icon images then I recommend you to use these icons. Becasue, these icons are not made with JavaScript. They are just like fonts and CSS which we used in our templates. So, using and adding Font Awesome Icons in your blog is simple. Just you need to install CSS plugin and you need to add Awesome icons where you want to see it in HTML tags. If you do so, you can also use them in your blog. Let’s see how to add them in your blog…..

How To Use Font Awesome Icons in Blogger

#1 Installing Plugin

Step 1: Go To Blogger > Template > Edit HTML and search For <head> tags.

Step 2: Then paste the below script just below/after </head>.

<link href=”//” rel=”stylesheet”/>

Step 3: Just save your template. We’ve installed the plugin perfectly. Here the toughest part goes..

#2 Adding Icons

Step 1: Open Font Awesome Icons List in a new browser tab.

Step 2: Try to get HTML tags such as <a> or <div> or <li> for using icon.

Step 3: Then add <i class=’fa fa-home’></li> in between the HTML element tag. In briefly words, add <i> HTML tag in between along with calling icon class.

 Like this : <a href=”URL”><i class=”fa fa-home”></i>Home</a>

Step 4: For changing the icons, Open the Font Awesome list and there each icon contains some class name. Just replace those names in class”” attribute.

Step 5: Added Icons Successfully. Now it’s time to customize them..

#3 Customizing

Step 1: Customizing icons here are so simple just like CSS scripts. But here, we want to customize <i> tag in CSS.

Like this: i { color:#444; font-size:25px; }

Step 2: In the above code, you can see we’ve given icon color and font-size. Just change them, That’s it guys!

Final Words

I don’t think this method will be so simple for those who knows CSS. If anyone facing any issues then share it with us in comments. Hope that you will like this icons and these icons will be so helpful for you. Share your thoughts in comments. Do some likes and share this with your friends. Have a cheerful day ! Cheers:)

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.