Font Awesome is an iconic font originally designed for Bootstrap. 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 designer, this is a useful kit to have, because it'll let you create professional and optimized designs for your webpages.
Note: You can see some of the Font Awesome icons used in our blog's navigation panel. Notice the icons next to the text that indicates the target location of a tab (i.e. Home, SEO, etc.).
Font Awesome offers some amazing features that make it worth checking out.
- 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 part - 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.
- They're totally free!
Adding 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.
Wasn't that simple? :).fa-home { font-size: 32px; color: #033; padding: 8px; border: 1px solid #000; float:left;}
You can see the demo of some of the Font Awesome icons right on our navigation bar.
Now Enjoy These Beautiful Icons....
No comments:
Post a Comment
PLEASE NOTE:
We have Zero Tolerance to Spam. Spammy Comments and Comments with Links will be deleted immediately upon our review.
For More Rules Read Our Comment Policy