Creating Custom Icon Fonts
Wednesday, July 31st, 2013
Benefits of Icon Fonts
I’ve always been obsessed with icons and hieroglyphs, so as a web developer, I got all excited with the sudden popularity of icon fonts. Using icon fonts, as a replacement for images, has many benefits. The most important, in my opinion, is performance. Because icon fonts are vector and are contained in a single file, they perform better then, say, using a sprite as an image container. Although, both a sprite and a font file make a single HTTP request, the icon font file is usually a lot smaller.
Another important benefit of using icon fonts is optimization for high-resolution screens. The media query is a wonderful thing, but if it can be avoided for swapping images for high-resolution screens, it’s a quick win – one file for all screens and device types! Because icon fonts are vector, they will scale without loss of quality and again, when you compare file size and the single HTTP request, it’s a no-brainer.
With icon fonts, it’s also super easy to change color and size using CSS. As browser support for CSS3 becomes more advanced, you will be able to do all kinds of other cool stuff, like apply gradients, drop shadows and background textures.
Getting Started
There are a few icon font generators out there, but I’m using Icomoon because you can import your own vectors, import other icon font packs, only include the icons you need, use the Private Use Area feature, etc. The best part about Icomoon is that it’s 100% free and open!
The first thing you’ll want to do is go to http://icomoon.io/app/. When you first enter the app, you will see icons galore! If the icons that are needed are on the screen, you can simply click to highlight the icons you want. You must make sure that the Select tool is selected, but I’m pretty sure it is by default. There are two other tools available. The second tool is the Delete feature. When selected, it removes the icon from the icon library that displays on your screen. The third tool, is the Edit tool. When selected, simply click on an icon to edit. You will see a pop-up window (figure 1) with the icon you selected and a few features including Rotate, Flip, Scale and Move. You can also download that icon as an SVG. This is helpful if you want to take it into Illustrator and make changes to the icon that wouldn’t be able to made inside of Icomoon.
Tags: CSS, design, fonts, HTML, icons
Posted in Code, Design, Development, Mobile | No Comments »