Select Page

One of the biggest struggles I’ve faced when developing sites is icons.

If you’re from the old school of web design, then you probably used straight up jpgs or gifs for your icons. Once you graduated from that, you probably learned how to use CSS to generate your icons by using the background-url element. You might have even got fancy and learned how to position it using :before and :after and done some crazy spritesheets to make sure that your load time was quick and you could do sexy :hover transitions.

But then along came retina displays, and now I spend twice as much time working in CSS because for every image, I now have to declare it twice. Once for regular displays, and another at 2x the resolution for retina.  Yeah, sure, I can use media queries to just say “if this, load that” or I can even use something like SASS to generate that for me, but it still requires me to spend time in Photoshop creating two sets of elements for my site. If you’re working with a designer who doesn’t know about this, then you might have an additional struggle since they designed everything to be at standard resolution.

As you can see – it can quickly become a huge pain in the ass.

Fortunately for us, there is a new trend emerging that is in large part thanks to the move away from skeuomorphism in design and the trend towards flat designs. Bright colors and bold icons are in, and I think they are going to stick around for awhile, thanks in large part to operating systems like Windows 8’s Metro design and the iOS 7 rebrand.

One of the cool things about CSS is that it looks great – I’ve been pushing my development to create graphic elements in pure CSS as opposed to creating an image for a few years now. Gradient backgrounds, drop shadows, border radius, shapes, there are endless possibilities to create great looking sites with minimal graphics.

Ok, so I kind of went off on a tangent there, but believe me, I’m getting to my point.

Another great thing CSS handles is typography, and since the introduction of web fonts, there are all sorts of crazy and imaginative things folks have been doing with type on the web. My personal favorite thing to come out of this has been icon fonts. There are hundreds of different web-ready font sets out there, but today I’m here to talk about my favorite – Font Awesome.

Font Awesome is an icon set that currently has 439 different icons that you can use for your site. Since they are made for the web, it means whether you have an icon that’s 12px height or 120px height, they’re going to have the same crispness and look great on your site. So long spritesheets!

There are two ways to incorporate Font Awesome into your website, you can download the fonts from their GitHub repo or you can check out their CDN integration. There are also a handful of WordPress plugins that are currently available, but in my opinion, none of them do a great job of keeping up-to-date with the latest font additions.

Since I love CDN, I’ll add it to my site that route by adding the following to my page:


<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

 

That’s it – now Font Awesome is available for me to use anywhere on my site and I can also refer to it in my CSS.

Font Awesome now gives me different ways to add icon elements to my site. I can use good old HTML code like this:


<p><span>&#xf1a8;</span> - Pied Piper</p>

 

One note on this method – I have noticed that I’ve had to define the font-family in my CSS first. In the above example, I would just set a css rule to make sure that anything that appears in a span in a paragraph has the CSS style set.

Alternatively,  I can define it in my CSS like this:


/* for use in body text */

p span{

font-family:"FontAwesome";

}

/* for use as an icon */

.pied_piper{

height:50px;

width:60px;

line-height:48px;

text-align:center;

background-color:#090;

color:#FFFFFF;

cursor:pointer;

border-radius: 2px;

transition: all 300ms ease-in-out;

}

.pied_piper:hover{

background-color:#0C0;

}

.pied_piper:before{

font-family:"FontAwesome";

content:"f1a8";

font-size:24px;

}

 

Or what’s really cool is that all of the icons come with pre-defined classes so adding them is as easy as this:


<div class="icon fa-pied-piper-alt"></div>

 

In the end, you can end up with a custom icon like this:

So you can now see how using Font Awesome and CSS, you can now extend your site to do all sorts of cool things. I’ve found that these are great for adding social icons to sites, and there are also great “standard” icons you can use if you’re developing web applications. Best part is –  minimal load time. Instead of loading in all those images, I’m loading one font set and having all those icons available to me across my entire site.

I hope you’ve found this helpful, this is just touching on the surface of what you can do. How are you using Font Awesome on your site? Leave a comment below!

Quick Links for this article:

Font Awesome Cheatsheet 

Font Awesome Twitter