In the Graphic and Web Design icons are such elements which gives beauty to the design. The use of icons in designs is increasing day by da...
What is Font Awesome?
Font Awesome is a brand which gives iconic font for designers to make better designs by the use of icons. That iconic font name is same "FontAwesome". In WordPress and other platform, it is common now and everyone is using this in their blogs and sites. The brilliant thing of this special font is that it doesn't use images which helps to make blog more fast while image icons take more time to load. This font contains 369 icons including Web Application Icons, Form Control Icons, Currency Icons, Text Editor Icons, Directional Icons, Brand Icons, Video Player Icons, Medical Icons and many more which are being updated in version. It's current version is 4.0.3 that is absolutely free for everyone.
Is It Easy To Use Such Icons in Blogger?
It's extremely easy to use font awesome icons in blogger if you know basic CSS. Even I think it is more easy to use than using image icons. I recommend everyone who has blogger blog to use these icons in their blog if they want to bring awesomeness to their blog design. If you're designing templates and widgets then you can also use them to improve design. These icons are also not made with JavaScript but just font and CSS is used in them. The steps are easy, just install external CSS plugin and call icons anywhere in HTML where you want to use.
How To Use Font Awesome Icons in Blogger
1. Installation
- Go To Blogger >> Template >> Edit HTML
- Search For <head>
- Below It Paste The Following Code.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
- Save It.
- Successfully Installed!
2. Using Icons
- Now the main problem is here in using icons. Let's fight with second step.
- First of all, Open this icons list URL in browser tab. Font Awesome Icons List
- Get any HTML element such as <a> or <div> or <li> in which you want to use icon.
- Now put <i class='fa fa-home'></li> between the HTML element tag.
- Didn't get it? See the example below.
<a href="URL"><i class="fa fa-home"></i>Home</a>
- We just put <i> HTML tag in between along with calling icon class.
- To change the icon, Open the list and there each icon contains class name which you can replace in class"" attribute. Just remain the first fa as it is and replace another class after space.
3. Customizing Icon
- In some cases, you may need to customize the icon.
- Here is nothing difficult you can do it with simple CSS.
- Just call <i> tag in CSS and customize it as you want.
- Example, i { color:#444; font-size:25px; }
- In the above example, You can see I've given icon color and you can handle icon size easily with font-size.
- That's it!
That's all about using font awesome icons in blogger and I don't think it is any difficult for those who know CSS but in starting, you might face issues. Well, customization is also easy by using CSS only. I hope that icons will help you to make better designs and these icons are gorgeous. Got a problem? Ask us in comments below. Share your thoughts and also share this. Have a nice day and Happy Icons For Blogger!
COMMENTS