How To Use Font Awesome Icons in Blogger
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!
0 comments:
Post a Comment