Design Tools: Font Awesome

I’ve been looking to begin sharing designer/developer tools for some time now. For a first step, I think I will share something that hopefully everyone already knows about, or has at least heard of, Font Awesome. Why is it called Font Awesome? Well, because it’s pretty fontin’ awesome. There are quite a few reasons to appreciate and utilize this tool, but here are a few that I enjoy.

What is Font Awesome?

Font Awesome is a set of scalable vector icons that has been turned into a web font. Or as they put it, “… a pictographic language of web-related actions.” If you ask me, and many other web designers out there, this is absolutely genius. But why?

The problem

When using icons on websites, designers use to make image maps. Image maps are a large image divided up into a grid of smaller images that are all the web ready icons or images they wanted to use on their site, like external link icons, for example, that let users know that by clicking on the link with that icon next to it will open a new tab instead of redirecting the current page. The designer would use html and css to tell the site the location of the desired image or icon inside the image map, then hide the rest. This way, a person visiting the site only needed to download one image instead of a few dozen smaller ones. Making everything just a tad faster even though users still had to download the initial, larger image. Before image maps, designers were making 20 different icons for everything on their sites from map markers to unique bullet-list icons – but lets not get into that.

Even with these image maps, once creators linked to the icon, they couldn’t really change the icon’s color – unless they added colored variations to the initial image map, which isn’t very fun. Today, with rapidly changing or increasing pixel-density displays and mobile tech, not being able to scale your images and icons or change their color on the fly can really hurt your design, and the overall customer experience of your application or website.

How Font Awesome is different

First of all, unless you require more than a basic, yet still extensive, set of icons, which I never really have, Font Awesome is open source. This means you can use it on your website, your client’s website, or any other web project or application you feel like tackling, for free! The free Font Awesome set comes with dozens of icons from bullets and indicators, to classic male and female – as well as some nifty icons, like retro cameras. Since the Font Awesome icons are SVG (Scalable Vector Graphics), creators can simple include the Font Awesome files in their file structure or CDN to the resources, then change their color or size with ease using a bit of HTML and CSS. Like this:

 
<i class=”fa fa-camera-retro”></i>

<i class=”fa fa-camera-retro fa-3x”></i>

<i class=”fa fa-camera-retro fa-3x” style=”color: green;”></i>

<i class=”fa fa-camera-retro fa-3x fa-spin” style=”color: green;”></i>


 

You can also include them in lists and buttons to help spice up your site in an infinite number of ways – saving you huge amounts of time that you can dedicate to custom photography or that last-minute request from your customer. In case you’re wondering, I’m not being paid by Font Awesome either, I simply love the tool and I use them whenever possible. Take a look around my site and you’ll notice them popping up here and there. If you get a chance, go check out their icons, er, uh … fonts? and start playing around with ’em over at https://fontawesome.com

As always, thanks for reading!

Posted on August 25, 2015 in CSS, Fonts, Graphics, HTML, Resources

Share the Story

About the Author

Back to Top