So we have all gone down that path of creating a beautifully designed user interface full of icons either loving hand crafted or culled from the corners of the Internet. Now it’s time to build and we have to break down all of those icons into usable images for our site. If you only have a few icons to create perhaps it’s quick and easy just to create some happy little transparent PNGs or maybe you have quite a few and decide to build a big ole sprite complete with all the icons on and off states set up. Then you carefully map out all those background position numbers so you can write all your CSS.
You are already to start implementing that sprite when the customer’s boss get’s his shiny new iPhone 5 and says “Hey why do all those icons look fuzzy on my cool new smart phone.” “Or hey let’s make this responsive and scale those icons up and down for all those form factors.” Now you have to go back and create duplicate higher res images and create some media queries to look for that hot looking retina display and swap everything out. Or maybe God forbid IE6 enters the picture and now those transparent PNGs are useless without some more CSS or polyfill hackery.
Enter the Icon Font.
Why are icon fonts awesome? Well because they very easily solve all of the above headaches. Let’s start with what an icon font is exactly. An icon font is essentially a usable version of the old dingbats. The characters in the font are all icons that have been created as vectors and converted into a font. This means that you can easily decrease your page load size and increase performance. According to Pictonic your load times can be 14% faster than with images and as much as 90% smaller than SVG. This is great for the web but even more important when it comes to our mobile development as not only is it faster and smaller but inherently supports retina displays since it’s a font. So to recap the advantages
- Much smaller files size than traditional techniques
- Can easily be treated with CSS. No need for tricky background positioning because you can just change their color, add shadows and even animate them
- No need for multiple image sizes and media queries to support retina displays or responsive UI
- You can easily size them just with a font size
- If you really have to support IE6 they work there as well if you use the EOT version of the font face. They have transparent knockouts and don’t suffer the issues that IE6 has with alpha transparencies.
Alright so how to get started right?
So I know this all sounds great so what’s next. There are a lot of ways to get started using icon fonts. As I mentioned before they are awesome so let’s start with FontAwesome which was actually designed to work with Twitter Bootstrap. Bootstrap being a great responsive user interface clearly needed a scalable solution of icons. FontAwesome is an icon font containing 249 ready to use icons. To start using FontAwesome download it here. Once you have it downloaded you can include the CSS file or add it to the Twitter Bootstrap LESS files. You can still use it even if you aren’t using Bootstrap. Once the CSS and font-face are included it’s a simple matter of using the provided classes. Let’s say you need a beer icon(and really who doesn’t) then all you do is add the class icon-beer to your html and you get the icon. It’s all very well documented on their site so feel free to read up
While having an awesome set of 249 fonts is great the real geeks in all of us we want to be as efficient as possible. That means we will rarely need that many icons at our fingertips so there are a couple of solutions to check out as well. You can subset your FontAwesome icons by going to ICNFNT. This site will allow you to select the icons to include and create a download of only the icons you want. In addition there are several other sites where you can build your own custom icon font libraries. Fontello and IcoMoon are two other sites that allow the user to select icons from a list and download a custom build you can use.
So you are a DIY kind of individual?
So perhaps you are just really particular or maybe you are working with an outside firm so you REALLY need to use some custom icons that have been created or that you created. Well there is a DIY solution that will allow you to build a custom font from a series of EPS or SVG files. The solution is called Font Custom. Font Custom runs on Mac and Linux and once installed can be easily run from a command line. I won’t bore you with the details which you can read about on the site but what you do is create individual files, either SVG or EPS, for each icon you want in the font. Name them clearly because the class names will be built off of the filename. So if your file is called bulb.eps your class will be “icon-bulb”. Once installed you load all your files into a folder and then run the program against them to create the font and the CSS required.
So in summary icon fonts are awesome and are an extremely valuable toolkit to deal with the ever expanding challenges web designers have.
