How To Use Font Awesome Icons in your Blogger Template?

Use Font Awesome With Blogger?
Do you like to play around with your Blogger template and customize its design? Or do you design professional templates for an income? How do you deal with template icons, such as buttons, form controls, navigation signals, etc.? Most people use images for such icons, which tend to deteriorate with an increase in their size. Some developers would scale down high-quality image to avoid this problem, but unwittingly introduce a new one - increased page load time due to increased file size. The solution, then, lies in an icon-based font such as Font Awesome, which can help designers optimize their site's icons.

What is Font Awesome?

Font Awesome is an iconic font originally designed for Bootstrap. It is a collection of some SVG (Scalable Vector Graphic) icons that can be customized, and used on any webpage. These are compact-sized icons that are not heavy on size, and yet are scalable, which means they retain their integrity when they're enlarged to virtually any size.

As a designer, this is a useful kit to have, because it'll let you create professional and optimized designs for your webpages.

Note: You can see some of the Font Awesome icons used in our blog's navigation panel. Notice the icons next to the text that indicates the target location of a tab (i.e. Home, SEO, etc.).

Font Awesome offers some amazing features that make it worth checking out.
  • Font Awesome contains a collection of 369 SVG icons from a wide array of categories, including navigation controls, form controls, buttons, currency icons, web application and brand icons, and so on
  • Font awesome icons are very lightweight, and they load much faster as compared to CSS sprite images. They are also scalable, and can be transformed into any size without having their quality effected
  • The best part - they're easily customizable! You can apply CSS styles to modify them according to your needs. You can change their size, color, shadows - anything that can normally be done with CSS.
  • Aaaaaand......they're totally free!

Adding Font Awesome icons to Blogger?

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

Call external Stylesheet

Open your webpage's source code, and locate the <head> section. If you want to add these icons to your template like ours, you need to open your Blogger dashboard, and go into the Edit HTML. Once you've located the header section, copy and paste the following line of markup there.

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

Make sure you copy the link as it is (including the http:// part). This is where the Font Awesome CSS file is stored. You can download it to your own server if you like for greater speed.

Adding icons

You can view a list of available icons in Font Awesome here. Pick an icon of your choosing, and note down its CSS Class name (for e.g. fa-home or fa-arrow-down). Now, to use this icon, use the <i> tag as shown below.

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

You can replace the highlighted text with the class name of any icon you like. For example, <i class="fa fa-arrow-down"></i>. And since this is an inline tag, you can use it inside a paragraph tag, list tag, even anchor (<a>) tag, and so on.

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-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}

Wasn't that simple? :)

You can see the demo of some of the Font Awesome icons right on our navigation bar.

Well? What do you think? Did we miss something essential? Are you facing any problems with using these icons? We'd love to hear from you! Just use the comments section given below. Peace :)

Oh, and I almost forgot! We'll soon cover some useful tutorials on customizing FA icons. So stay tuneeed! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

2 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hi Qasim, I have also try it but not worked then avoid to adding custom icon, Now your step by step Guide helped me turning Right Point, Thanks Qasim

    ReplyDelete