How to Integrate Properly Font Awesome Icons in Blogger Blog

Everyone of us in the field of blogging wants to play around with our Blogger template and customize its design. Isn't it? One of the interesting  activity is dealing with icons such as buttons, form controls, navigation signals and the like. Most web developers use pictures for such symbols, which have a disadvantage to disintegrate as it increases or decreases  its size. But don't worry since we have a Font Awesome Icons  which can help us to solve such problem.

Font Awesome- Meaning

Font Awesome is a notable textual style initially developed by Bootstrap. It is a gathering of some SVG (Scalable Vector Graphic) symbols that might be redone, and utilized on any page. These are minimal measured symbols that are not overwhelming on size, but then are versatile, which implies they hold their honesty when they're extended to essentially any size.

Textual style Awesome contains a gathering of 369 SVG symbols from a wide exhibit of classifications, including route controls, structure controls, catches, coin symbols, web application and brand symbols, etc

Textual style amazing symbols are extremely lightweight, and they stack much quicker as contrasted with CSS sprite pictures. They are likewise versatile, and could be changed into any size without having their quality effected

The best part - they're effectively adaptable! You can apply CSS styles to change them as indicated by your needs. You can change their size, shade, shadows - anything that can ordinarily be finished with CSS.

Adding Font Awesome icons to Blogger?

Follow the very simple steps below  to add Font Awesome icons anywhere on your Blogger blog (or any HTML webpage for that matter).


Step 1. Go to Blogger dashboard >> Template >> Edit HTML and locate the code below

</head>

Step 2. Once you've located the header section, copy the following line below and paste it  just above that code.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Pick an icon of your preference, and note down its CSS Class name (for e.g. fa-arrow-down). Now, to use this icon, use the <i> tag as shown below.

<i class="fa fa-arrow-down"></i>

You can replace the highlighted texts with the class name of any icon you like. And since this is an inline tag, you can use it inside a paragraph tag, list tag, even anchor (<a>) tag, and so on.
Please see my sidebar on how to add font awesome icons  and my navigation tab below to see how it works.
You can view a list of available icons in Font Awesome.

Editing icons

You can apply any CSS Style to an icon. Just take the class name, and write a new CSS style as shown below.

.fa-arrow-down{
 font-size: 30px;
 color: #ddd;
 padding: 8px;
 border: 1px dashed #000;
 float:left;}

Hope you find this tutorial helpful to you buddy and if you have questions you can leave it at our comment box.
Thank You and have a Nice Day!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook