How to integrate and use Font Awesome in Google Blogger Template?
use font awesome icons in blogger
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.
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.
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>
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>
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>
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.
1 comment