FontAwesome is an easy-to-use, portable icon set that allows you to incorporate a huge amount of icons into your website without needing to create image files for your icons. You simply link the FontAwesome CSS to your website and all of the icons are available to you automatically.
Adding a simple CSS class to your HTML elements allows you to use some very cool vector icons at any size and colour you choose. This not only saves you time, but can also help with the creative process when you can't quite think of a fitting icon to use for your website. Best of all, it's free both for commercial and personal use and it's open source so you can go and look at the code and following behind it before you start.
Getting started with FontAwesome
The first thing you'll need to do is to add FontAwesome's CSS file into your project. If you use Wordpress or another CMS/framework there may be a native function that handles the importing of a CSS file programmatically, but for most people adding this snippet of HTML code with your other CSS includes in your <head> section will suffice:
<link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="all" />
This will now link all FontAwesome CSS classes to the icons, and should just work instantly! The hardest part about using this icon set is to decide which icons to use (as there are over 350 of them to choose from).
FontAwesome CSS Classes
To use one of these icons on your website, you'll need to add the CSS classes "fa" and the chosen icon's class to your HTML element. For instance, if you wanted to add a magnifying glass to a search button, you could add an <i> element to your button and give it the class "fa fa-search". When you save and view the page, your browser will then use the FontAwesome CSS file to look up that code and display the search icon.
Choosing the right FontAwesome icon
So you have a new website, you need to add some icons, but you don't want to sift through 350+ icons to find the one you're after? We've created a helpful tool to assist you in choosing the right article. Take a look at our FontAwesome cheatsheet when you get stuck while choosing your website's icons.
Customising FontAwesome icons
The coolest part of using these icons on your website instead of your own custom icons is that it comes built in with plenty of customisable features. For instance, if you want to increase the size of an icon, add "fa-lg" to the icon's class. To make it huge, add "fa-4x". To make them fixed-width (so they can be added to the starts of list blocks without affecting positions) then you can add "fa-fw". Rotations are no problem - "fa-rotate-90" and "fa-rotate-horizontal" handle that. Hell, you can even make them spin continuously by adding the class "fa-spin" to them. Nifty huh?
Take a look at our cheatsheet for more customisations.
So why choose FontAwesome?
We chose FontAwesome as the icon solution for our new website because it suits our needs perfectly. Take a look around at our services (website design, SEO, etc) to see the icons in action. FontAwesome suited us because it ticked all the boxes:
- Free for all
- High resolution
- Pretty
- Backed by thousands
- Awesome!
Not only are you provided with free vector icons for your website, but they're completely open source and backed by the support of thousands of people worldwide. Also, if visitors to your website have been to someone else's website that uses the same FontAwesome icon library, it will be cached in their browser and therefore allow faster loading times of your website.
FontAwesome saves you time (and therefore money) by negating the need for custom icon designs which can take hours to get looking perfect.
If you have a great designer who works for peanuts and can create your totally customised vector graphics in a way that beats FontAwesome then that's great - stick with them. But, like the rest of us, you want to get the best result for the most affordable and easy-to-use way, then FontAwesome is your best bet for scalable, free vector icons for your website.
