Home
Blogger

How to integrate and use Font Awesome in Google Blogger Template?

use font awesome icons in blogger
font awesome 4.0

The way of Blogging is rapidly changing day by day. Previously we use heavy image for decorating our Blogger template. But due to use of mass images template loading time dramatically increase as a result of slow loading visitors are not interested to stay on blog site. For the time being many new features has revealed and now we would able to use different widget and plugin in our Blogger template.

However now we can use vector icon instead of images without any java script coding through Font Awesome. Font Awesome included 369 Icons under one font which is best for using in any website or blog. And it also help designer for optimizing their site's icons. Now most of the professional Blogger template designer using Font Awesome.

What is Font Awesome?

Font Awesome is a pictographic language of web-related actions. It is also known as iconic font. For example if you write predefine font code then it will display as vector icon in your Site. And the most positive feature is that you can easily scale the icons that included in Font Awesome file. Not only icon you can also customize icon's size, color, drop shadow as well as able to add animated effect and so on by the help of CSS coding.Originally Font Awesome designed for Bootstrap but now using almost in every platform. Bootstrap is a collection of SVG (Scalable Vector Graphic) icons which can resize to any size.

In my Blogger template I am using 3.2.1 version of Font awesome icon like in comment, date, quote. But recently it has released 4.0 version with additional new 11 icons. The difference between older version and newer version, simply in coding. Suppose for home icon older version code is \f015 but in case of newer version code is fa-home.

Features of Font Awesome-
  • Font Awesome included 369 iconic font and the number of icons will increase with new versions.
  • This very light to load, as a result it won't affect on your template loading time.
  • Most of the icons are easily customizable and you can enlarge the icon size.
  • Animated effect can be integrated with icons.

How to add Font Awesome 4.0.3 into Blogger?

Including Font awesome in Blogger template is very easy. Just you have to follow some simple steps from below-

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 

Step 3 And locate the <head> section in your Blogger template

Step 4 Finally copy following line of markup and paste it below <head>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Step 5 Now simply hit the Save button.

How to use Font Awesome for adding icons?

You will get a full list of Font Awesome icon code which can be used in blog or website. Just you have to choose the icon and get the code from Font awesome site then simply add the code. Though I have told before that we have to use CSS for applying Font awesome code so you have to pick some CSS class name. For Example most of the Font Awesome code start with fa (Font Awesome). For home icon the proper code is fa-home and now we have to use <i> tag.
<i class="fafa-home"></i>
Kindly visit the Demo page to see the Font Awesome icons in different style.

Live Demo

Font Awesome Icon can be Edit in different way. But mostly effective by CSS coding. You can apply CSS Style on any icon. Just take the class name, and write a new CSS style as shown below.
For example the below CSS code block can be add before </b:skin> on HTML source or you can add the code inside <style>.............</style>
.fa-laptop {font-size: 32px;color: #033;padding: 8px;border: 1px solid #000;float:left;}
And the HTML code is below

<i class="fa fa-laptop"></i>

This will display a Laptop colored icon with border. And the color has added by CSS code.

color icon

Resizing Icon

You can increase or decrease the icon size by using different code like fa-1g, fa-2x, fa-3x etc.

<i class="fa fa-desktop"></i><i class="fa fa-desktop fa-1g"></i><i class="fa fa-desktop fa-2x"></i><i class="fa fa-desktop fa-3x"></i><i class="fa fa-desktop fa-4x"></i><i class="fa fa-desktop fa-5x"></i>
 resized icons

Adding Spinning effect

You can easily add spinning effect in any icon. The code for spinning effect is  fa-spin. And the whole code will like below-
<i class="fa fa-spinner fa-spin">
Here you have to change the fa-spinner icon code for spin different icons.

Add Icons with List Style

Generally for displaying icons in list style you can use the below code block. If you want to add more icon then just add extra line of the code block.
<ul class="fa-ul">
<li style="text-align: left;"><i class="fa-li fa fa-desktop"></i>Desktop Icon</li>
<li style="text-align: left;"><i class="fa-li fa fa-thumbs-up"></i>Thumbs Up Icon</li>
<li style="text-align: left;"><i class="fa-li fa fa-fighter-jet"></i>Fighter Jet Icon</li>
</ul>

list style icon 

Add Icons with Stake Style

Under this style you can display icons horizontally two, Three or more icons in a row at a time.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-desktop fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-fighter-jet fa-stack-2x text-danger"></i>
</span>

 striking icon

To Get the all icon's code please visit the below link
  • http://fontawesome.io/icons/
Hope this tutorial will able to answer all of your question about Font Awesome. Still Confused? Then feel free to leave a comment below.

2 comments

  1. it's not showing up in my template with latest version of font awesome . need help ! www.jolche.com
    • Hi Bouy..I just check your blog your template containing older version of Font Awesome 3.2.1. So for using 4.0 version you have to replace the below code by

      http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css

      //netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

      You would also find many code like below but for 4.0 version the code is completely different. And it require some coding knowledge.

      The below codes are 3.2.1 version of Font awesome. And you will find those in your template.
      content:"\f004";

      content:"\f015

      To get more code of older version visit the below link

      http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

      But after adding new Font Awesome 4.0 you have to replace the all older code like below

      fafa-home

      that means you have to change the whole template coding.

      Font awesome is easy to use which template is not containing any older version of Font Awesome.So first try Font Awesome 4.0 in new template and then add the code in your current template. If you need any further help then feel free to write.
Go Up