how to add font awesome icons inside navigation menu in blogger

Do you want to play along with your Blogger template to customize its style? Or does one design skilled templets for an income? however does one deal template icons, like buttons, type controls, navigation signals, etc.? Many web developer use images for such icons, that tend to deteriorate with a rise in their size. Some developers would scale down high-quality image to avoid this drawback, however unknowingly introduce a replacement one - magnified page load time because of magnified file size. the answer, then, lies in associate icon-based font like Font awesome, which may facilitate designers optimize their site's icons.

What is Font awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. In a single collection, Font Awesome is a pictograph language of web-related actions.Font Awesome won't trip up screen readers, unlike other icon fonts.

Font awesome contains a set of 519 SVG icons from a large array of classes, together with navigation controls, kind controls, buttons, currency icons, internet application social media icons etc

Font awesome icons are very light-weight, and that they load a lot of quicker as compared to CSS sprite images. they're additionally scalable , and may be re-transformed into any size while not having their quality effected

Font awesome icons can easily be customization! this is the best part.You can apply any css effect to customize them according to your own needs.with the css code you can change size, color , shadows etc

The Awesome thing is font awesome are totally free to use

How to add font awesome icons to blogger ?

Follow the below steps to add font awesome icons anywhere in you blogger blog or any html website .

First you have to add style-sheet inside your blogger template, Go to blogger dashboard ,Click Edit html and find <head> and paste the below line of code just next to <head>

Adding icons :

You can view a list of all font awesome icons here . you just have to pick an icon of your choosing and note down the css class name (for example fa-server or fa-arrow-up)

Now if you want to add font awesome icons inside your navigation menu you have to find the following line inside your blogger template <nav id="nav"> and then add this line  with you navigation menus.

for example : <a href='http://www.cybertrickz.info/search/label/how%20to'> How to </a>

NOTE : you can also change the color #0a7df0 with any color you want !

Wasn't that easy and simple? :)

well if you have any problem while adding font awesome icons inside your navigation menu in blogger the just use the comment section below :)
thanks :)

Pages