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.
0 comments:
Post a Comment