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:
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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
5 comments
Man that's really useful!
Well done Faizan! thanks for sharing this post.
Stay Blessed :)
It doesnt work in firefox ! But if we use div instead I class it does work :)
A great tutorial ! But i still need to know how to use fontello fonts in blogger bro..!
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.