Do you design professional templates for an income? How do you deal with template icons, such as buttons, form controls, navigation signals, etc.? Most people use images for such icons, which tend to deteriorate with an increase in their size. Some developers would scale down high-quality image to avoid this problem, but unwittingly introduce a new one - increased page load time due to increased file size. The solution, then, lies in an icon-based font such as Font Awesome, which can help designers optimize their site's icons.What is Font Awesome?
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.
- Aaaaaand......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.
.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
Wasn't that simple? :)
You can see the demo of some of the Font Awesome icons right on our navigation bar.
Well? What do you think? Did we miss something essential? Are you facing any problems with using these icons? We'd love to hear from you! Just use the comments section given below. Peace :)
Oh, and I almost forgot! We'll soon cover some useful tutorials on customizing FA icons. So stay tuneeed! :)
EmoticonEmoticon