Do you want to add hundreds and thousands of scalable vector icons to your blogger website? One of the most proper , easy to use and current solution that most professional designers recommend is FontAwesome.
How to Add Font Awesome icons in Blogger?
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. It is really easy and will be completed in just two steps below.
About font Awesome
Font Awesome provides an awesome way of adding scalable vector icons that looks good at any size or dimension. Being a web designer you might need a lot of different icons 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 scaleable 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 Add Font Awesome Icons in Blogger easy steps:
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: Adding Font Awesome in Blogger:
To add Font Awesome is to include it in your Blogger Template file. add it right after the <head> Tag. Therefore, go to Blogger >> Template >> Edit HTML and scroll down and look for the <head> tag, just below it paste the following line of code.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>Step#2: Using Icons in Blogger:
Adding FontAwesome icons is pretty simple just add the following line of code where you want the icon to be.
<i class="fa fa-eye"></i> fa-eye
It should give you following results:
fa-eye
You now maybe wondering where are the other icons ? well, you can visit the FontAwesome Directory for a complete list of icons and many examples showing how to add them to your website easily.
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. Here is a good example showing exactly how to do that:
Font Awesome is a fantastic, flexible and a fast way to add quality graphic vectors to your blogger website. There are tons and tons of endless use to graphics in menus, posts, footer and etc to spice up your website. We hope this article has helped you in learning How to Add Font Awesome Icons in Blogger easy steps. Do share your thoughts in the section below.
You now maybe wondering where are the other icons ? well, you can visit the FontAwesome Directory for a complete list of icons and many examples showing how to add them to your website easily.
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. Here is a good example showing exactly how to do that:
.fa-eye {
font-size:2em;
font-weight:bold;
color:#fff;
border:1px solid #fff;
padding:10px;
float:left;
}
Font Awesome is a fantastic, flexible and a fast way to add quality graphic vectors to your blogger website. There are tons and tons of endless use to graphics in menus, posts, footer and etc to spice up your website. We hope this article has helped you in learning How to Add Font Awesome Icons in Blogger easy steps. Do share your thoughts in the section below.