Are you a template designer? Or you want to make your blog look awesome? Now a days, most of the designers are using images and icons in their templates/blogs. And one of the best way for adding icons to your blog is Font Awesome. Font awesome are vector icons that can be used on any webpage. It is a
set of SVG (Scalable Vector Graphics) Icons which means every icon looks
awesome at any size and you can easily customize shadow, size, color and
anything that's possible with the power of CSS. But how to add Font Awesome icons to your blog without getting any problem. So, today we are going to learn that How to Use Font Awesome Icons in Blogger.
Also Read:
How to Customize Font Awesome Icons in Blogger
Step 2. Go to Template >> Edit HTML >> Search (Ctrl + F) for the <head> tag and add the following code just below/after it
You can replace the highlighted text with the class of any other icon you like.
Example:
Simply: Choose an icon >> Note down its class name >> Use </i> tag >> Add it to your Blog
You can use these icons anywhere you want. e.g. Navigation menu, Side bar or anywhere you want in your template. You can view a list of available icons in Font Awesome Inventory here. For more Examples Click Here.
Also Read:
How to Customize Font Awesome Icons in Blogger
What is Font Awesome?
Font awesome are vector icons that can be used on any webpage. It is a set SVG (Scalable Vector Graphics) Icons which means every icon looks awesome at any size and you can easily customize shadow, size, color and anything that's possible with CSS. According to 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." You can see a demo of font awesome icons in our Navigation menu and sidebar.Features:
- 369 SVG (Scalable Vector Graphics) Icons
- No JavaScript Required
- Easily Customizable - Customize shadow, size, color and anything that's possible with CSS
- Scalable Vector Graphics (SVG) - Which means every icon looks awesome at any Size
- And...And..And they're Totally Free
Installing Font Awesome Icons in Blogger
Step 1. Log in to your Blogger DashboardStep 2. Go to Template >> Edit HTML >> Search (Ctrl + F) for the <head> tag and add the following code just below/after it
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
How to Use Font Awesome Icons in Blogger
Using font awesome icons in blogger is extremely easy. Check the below examples for using these icons in blogger :<i class="fa fa-user"></i>
You can replace the highlighted text with the class of any other icon you like.
Example:
<i class="fa fa-thumbs-up"></i>
Simply: Choose an icon >> Note down its class name >> Use </i> tag >> Add it to your Blog
You can use these icons anywhere you want. e.g. Navigation menu, Side bar or anywhere you want in your template. You can view a list of available icons in Font Awesome Inventory here. For more Examples Click Here.
Customizing Icons
You can also customize font awesome icons by applying CSS. Using CSS you can customize shadows, size, color and more.Example:
.fa-envelope {
font-size: 16px;
color: #000;
padding: 5px;
border: 1px solid #ccc;
float:left;
}
You can replace the highlighted text with the class of any other icon and then customize it. If you are still confused then have a look at Font Awesome Examples page.
That's all about using Font Awesome icons in blogger. I hope that these icons will help you to make your blog design better and better. We hope that this article helped you in learning How to Use Font Awesome Icons in Blogger and If you are facing any problem, using these icons? Ask us in comments below. Share this article with your friends and don't forget to subscribe us.
No Comment to " How to Use Font Awesome Icons in Blogger "