In the Graphic and Web Designing icons are such elements which gives beauty to the all design. The use of icons in designs is increasing day by day as they're more profitable and beautiful. About blogger themes and templates, icons are also being used in them but mostly those icons are images. Some themes have low quality icons with dull icon design and colors and other themes also have high quality flat and metro design icons. Well, Have you ever thought about using icons in blogger blogs? If yes then you might get this idea to use icon images? In this article, I 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. It is a collection of some SVG (Scalable Vector Graphic) icons that can be customized, and used on any webpage. These are compact-sized icons that are not heavy on size, and yet are scalable, which means they retain their integrity when they're enlarged to virtually any size.As a web designer, this is a useful kit to have, because it will let you create professional,beautiful and optimized designs for your webpages and blogs.
Font Awesome offers some amazing features, some are written below:.
- Font Awesome contains a collection of 369 SVG icons from a wide array of categories, including navigation controls, form controls, buttons, currency icons, web application and brand icons, and so on
- Font awesome icons are very lightweight, and they load much faster as compared to CSS sprite images. They are also scalable, and can be transformed into any size without having their quality effected
- The best quality - they're easily customizable! You can apply CSS styles to modify them according to your needs. You can change their size, color, shadows - anything that can normally be done with CSS.
- And one thing more they are totally free to use :)
How to Add Font Awesome Icons to Blogger?
Follow these steps to add Font Awesome icons anywhere on your Blogger blog (or any HTML webpage for that matter).Call external Stylesheet
Open your webpage's source code, and locate the <head> section. If you want to add these icons to your template like ours, you need to open your Blogger dashboard, and go into the Edit HTML. Once you've located the header section, copy and paste the following line of markup there.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Make sure you copy the link as it is (including the http:// part). This is where the Font Awesome CSS file is stored. You can download it to your own server if you like for greater speed.
Adding Icons
You can view a list of available icons in Font Awesome here. Pick an icon of your choosing, and note down its CSS Class name (for e.g. fa-home or fa-arrow-down). Now, to use this icon, use the <i> tag as shown below.
<i class="fa fa-home"></i>
You can replace the highlighted text with the class name of any icon you like. For example, <i class="fa fa-arrow-down"></i>. And since this is an inline tag, you can use it inside a paragraph tag, list tag, even anchor (<a>) tag, and so on.
Editing Icons
You can apply any CSS Style to an icon. Just take the class name, and write a new CSS style as shown below.
.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
Isn't it very easy :)
If you are facing any proble, comment below and feel free to ask!
Happy Bogging :)
0 comments:
Post a Comment