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.
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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.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 now over 1000 free icons to choose from!
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!