By : 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.
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=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” 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:)
