Font Awesome is Awesome!
Are you concerned that icons are slowing down your site/app? You shouldn’t be if you are using an icon font!
What’s special about an icon font. Icon fonts are vector-based: they load fast and are completely scalable (w/ a little CSS). An example of an icon font is Font Awesome. There are tons of different fonts depending on the style/type of icons you are looking for.
What is Font Awesome? Font Awesome is a fully open source collection of 400+ icons to use on your next web project.
- I’ll repeat. These icons are scalable vectors, which means they will load faster on your page than a pixel-based image
- Easy-to-set up. If you know HTML/CSS then you will have no trouble using Font Awesome :) There’s no JavaScript involved.
- Use CSS to style them however you please without worrying about compromising the quality of the icon.
Where can I get Font Awesome?
- Just paste the the Bootstrap CDN code below into the top of your HTML document and head over to Font Awesome to browse through the available icons.
Thanks to the generous folks at MaxCDN, you can use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don’t even have to download or install anything!
Paste the following code into the
<head>section of your site's HTML.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
- Or you can actually download Font Awesome by visiting the FA github page (they have a version available for Rails projects)
Font Awesome doesn’t have the icon I need! If out of the 400+ icons that Font Awesome offers there’s one that you need that they don’t have. You can either:
- Double check the Font Awesome Cheatsheet
- Use a font icon search engine/font generator: These sites are great if a font doesn’t include all of the icons you need for a project or if you would like to reduce the font’s file size removing the icons you don’t need.
- Glyph Search to peruse not only FontAwesome but other icon fonts as well (Glyphicons, IcoMoon, Ionicons + octicons).
- Fontello lets you search various fonts, (including: Font Awesome, Fontelico, Entypo, Typicons + more) and actually mix n’ match to create your own file with a combination of icons from the various collections.
- Create your own font on Fontastic from their collection of 9,000 + free fonts & upload your own icons as well :)
- Make your own .svg icon + import into Fontastic if you’re feeling creative.
- Request that a new icon is added to Font Awesome.
Will Font Awesome always be free? Dave Gandy the creator of Font Awesome recently raised over $70k to design Black Tie, a commercial icon font. The proceeds from Black Tie will allow him to continue working on Font Awesome! woo-hoo.
“I am still very committed to maintaining and improving the original Font Awesome. That’s why I’ve built rewards into the Black Tie Kickstarter that are designed to benefit the original Font Awesome, too.” Dave Gandy, Black Tie Kickstarter Site
Update: Font Awesome 5’s Kickstarter has ended but they are offering pre-orders for discounted licenses — Student / Non-Profit License $20 and Personal / Small Business License $40.
There are a ton of different icon fonts out there! Font Awesome just happens to be one of my favorites. Have you used Font Awesome before? What’s your “go to” icon font? Share in a comment below.
This post was originally published on Black Tech Diva.
