MBS: How To Integrate Properly Font Awesome Icons In Blogger Blog

Since then, Blogging is rapidly changing daily. Previously, we used heavy images intended for decorating our blogger template. But due to the use of mass graphics template loading time dramatically increase on account of slow loading visitors are certainly not interested to stay on blog a certain site. In the mean time, many new features have revealed and after this we would able to use different widget and plugin within our Blogger template. At least, for now we can easily use vector icon instead of images without any java script html coding through Font Brilliant. Font Awesome bundled 369 Icons under one font that's best for using in a website. And it also helps designer intended for optimizing their web-site's icons. Now almost all of the professional Blogger
template designers are 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.

Note: This very light to load, as a result it won't affect on your template loading time.

*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 section in your Blogger template Step 4 Finally copy following line of markup and paste it below
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 tag.

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 on HTML source or you can add the code inside

fa-laptop {font-size: 32px;color: #033;padding: 8px;border: 1px solid #000;float:left;}

And the HTML code is below

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.

*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-

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;">Desktop Icon</li>
<li style="text-align: left;">Thumbs Up Icon</li>
<li style="text-align: left;">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.

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 questions about Font Awesome. Still Confused? Then feel free to leave a comment below.

I am grateful to bloggespice for this idea.

HAVE A NICE DAY!

How To Integrate Properly Font Awesome Icons In Blogger Blog

*WHAT IS FONT AWESOME

*HOW TO ADD FONT AWESOME 4.0.3 INTO BLOGGER?

*HOW TO USE FONT AWESOME FOR ADDING ICONS?

*Resizing Icon

*Adding Spinning effect

*Add Icons with List Style

*Add Icons with Stake Style

1 comment:

Recent Posts

About Me

Definition List