How to Add Font Awesome Icons to Any Site

icon Fonts are the buzz. Can you use Font awesome icons 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

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 fast CDN for superfast delivery across anywhere in the world.

Add this single line of code.
<link href="" 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 now over 1000 free icons to choose from!

Font awesome code

For example.
<i class="fas fa-couch"></i> will display a couch icon

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

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

You can also flip icons by 90 degrees or any degree by adding classes like fa-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!

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.