How to Add Icon Font Awesome to Any Site

By 29-07-2013   Blogging
Tweet Share Email Share  

Can you add icon Font awesome without Twitter Bootstrap to any website and get beautiful scalable and CSS styled icons. Of course you can. I find myself using Font Awesome much more in my new website design projects. Initially I thought Font Awesome was a great replacement for Glyphicons icons in the amazing CSS design framework Twitter Bootstrap, but it is a must have standalone for any site.

See these Like icons, they are not images, but are all actually an icon font in different sizes.

Font icons

Advertisements

All the large number of icons you see on this page are powered by Font Awesome. This is much better than loading multiple icons, or adding them with custom background and CSS sprites. Being an icon font, it has all the advantages of CSS styling – like color, size and crisp design even at large sizes as fonts can scale easily.

Install Font Awesome

Installation is a snap. Although you can download and install the font on your server and call the icons from your design, the best way to install is via BootstrapCDN – add a single line of code in your HEAD tags  – and get Font Awesome pre-hosted on a CDN for superfast delivery across anywhere in the world.

Add this single line of code.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Using Font Awesome

Getting the icons anywhere on the site is so simple, you would be amazed. Simply use the i class to get the font icon of your choice. There are 361 icons to choose from!

For example.
<i class="icon-star"></i> will display a star icon

Font awesome has amazing code options which allow you to stack multiple icons on each other, for example <i class="icon-star icon-border"></i> will display a star icon with a border!

Changing the icon size is also easy. For example <i class="icon-star icon-3x"></i> will make the icon size 3 times larger. Its that simple.

You can also flip any icon by 90 degrees or any degree by adding classes like icon-rotate-90. Simply adding the class muted will make the icon dull. There are lots of amazing uses which you can check on their site…

Right now, the best way to add scalable icons to you site is using Font Awesome – all with a single line of code!

8 comments on “How to Add Icon Font Awesome to Any Site

  1. Johnny says:

    Finally! I look for this for about 10 hours and you are the only blog that proved useful and practical! Thanks a lot for this article! You won a new fan!

  2. Font Awesome does indeed live up to its name. I realized how many options it offers and how easy it is to modify any settings after trying it by myself. Thanks for sharing.

  3. Rohan Mod says:

    thanks dude it is much better then using small images and css sprites . i am adding it on my blog.

  4. nail machine says:

    Hey Mate Thanks for sharing this post it’s very useful for me as a web designer now i can deliver more professional layout to my client using this things :)

    Thanks again

    Keep it up :)

  5. Luis says:

    Finally! Someone shed a light on how to quickly add this beautiful font on my site. I’ve been playing around with it and searching on for solutions on the web, but to no avail until i have found your website. Definitely bookmarked!

  6. Neck Ties says:

    That is really great but will have to look at bootstrap now. Will this be compatible with other responsive frameworks ? Or is it just for bootstrap.

  7. Samrat says:

    Hi P Chandra,
    Thanks for posting such a nice article.Your article is very helpful and interesting to implement font and icon style in our websites in order to make it attractive.Your article really helped me a lot top gain knowledge on icon styles for which I am actually looking for.

  8. Max says:

    simply unbelievable – what a powerful, simple and effective solution. i haven’t heard about it before – what a pleasant surprise. thanks for a nice theme coverage.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php