How to Properly Add Font Awesome Icons in Blogger

Advertisements

Are you looking for a way to add hundreds and thousands of scalable vector icons to your blogger site? One of the proper and current solution that most professional designers recommend is FontAwesome. Recently, one of our users asked us that How to properly Add Font Awesome in Blogger so that he can add scalable vector icons in his website without getting its pixels blurred or adding any further images. Font Awesome provides a simple CSS technique that adds vector icons that looks awesome at any size. In this article, we will show you how to properly add Font Awesome Icons in Blogger.

What is Font Awesome:

Font Awesome provides scalable vector icons that looks good at any size or dimension. Being a web designer you might need a lot of different icon set to give your design a professional touch while maintaining the latest developing standards. According to the Font Awesome site:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS

Why to use Font Awesome:

Though the perks of using this tool are countless but few of the prominent ones are mentioned below:

  • Wide Range of Icons: It provides a wide range of high quality vector icons and clean images.
  • Supports CSS: It also works with CSS so that colors, size, shadows and other components can easily be adjusted and applied to them.
  • Speed: Font Awesome images are extremely lightweight and loads very quickly as compared to the CSS Spirit images.
  • Flexibility: They are so many different ways to add and use Font Awesome in your site to improve its performance and site appearance.
  • Innovate: The team behind this amazing tool is highly talented and they are continually working to make it even better.
  • Everything for FREE: You can get this and everything for absolutely FREE.

How to Properly Add Font Awesome Icons in Blogger:

Adding or implementing Font Awesome on your blogger site yourself is extremely straightforward and would take moments to finish. Here are the basic steps to follow:

Step#1: Installing Font Awesome in Blogger:

The proper way to install Font Awesome is to include it in your Blogger Template file without compromising the speed is to add it right after the <head> Tag. Therefore, go to Blogger >> Template >> Edit HTML and search for the <head> tag, just below it paste the following line of code.

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

Step#2:  Using Icons in Blogger:

Since, we have been using the newly released version of the Font Awesome 4.0.1. Therefore, keep in mind that naming has been changed for the version 4.0+ significantly from the previous version 3.x. All examples below are using version 4.0.1. Check out this example:

<i class="fa fa-play-circle"></i> fa-play-circle

It would give you the follow result:

fa-play-circle

If you want to access the complete list of available icons go to Font Awesome Icons inventory. It will not only provide you a complete range of icons, but would also provide a way to add them in your site which makes it a lot easier for non-designers.

Step#3: Applying CSS to Icons:

You can change the color, size, shadow and more through applying CSS to your icons. The method is quite straightforward and it is achieved through the class given to your icon. Check out the following example:

.fa-play-circle {
   font-size:20px;
   font-weight:bold;
   color:#111;
   border:1px solid #111;
   padding:10px;
   float:left;
}

If you are still confused about the usage, then you can also have a look at Examples page providing in-depth guide to both designers and non-designers.

Font Awesome is a fantastic, flexible and a fast way to add quality graphic vectors to your blogger site. There are tons and tons of endless use to graphics in menus, posts, footer and etc to spice up your site. We hope this article may have helped you in learned how to properly add font awesome in blogger. Do share your thoughts in the section below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

5 comments

January 27, 2014 at 11:12 PM

Man that's really useful!

January 28, 2014 at 7:27 AM

Well done Faizan! thanks for sharing this post.
Stay Blessed :)

January 31, 2014 at 12:52 AM

It doesnt work in firefox ! But if we use div instead I class it does work :)

February 10, 2016 at 9:27 AM

A great tutorial ! But i still need to know how to use fontello fonts in blogger bro..!

Editorial Team MOD
February 14, 2016 at 10:32 AM

We will soon write a tutorial on it stay tuned.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.