They’re the fonts that come preloaded on most computers, made up of hand gestures, zodiac signs, and tech dinosaurs like floppy disks and cassette tapes. (Windows’ version is called Wingdings.) They were used for…actually, I have no idea. Sending secret messages in code, maybe?
Well now, dingbats are all grown up. And believe it or not, they’re an important part of any modern web designer’s toolkit.
Say it with icons
We’ve talked a lot about responsive design here. But there’s one piece of the puzzle we have yet to address: how to deal with icons. The most obvious move might be to upload an image of the icon you need—say, a shopping cart to represent your online store, or a gear to link to your settings menu.
But image files are clunky. They get pixelated on larger displays. They don’t always size correctly. One option is to use a vector to ensure consistency across screens—but these tend to be large files, and can slow down your site if you have lots of icons to display.
So, what’s the solution? Over the past few years, many web designers have made the transition to icon fonts. Says The Next Web, think of icon fonts as a grown-up version of dingbats—with an actual purpose. These font faces are made up of the symbols we see all over the web every day: tiny speech bubbles, which we now associate with commenting features. Lock icons meant to suggest security. Miniature trash cans that allow us to scrap whatever we’re doing and start over.
Without even meaning to, we’ve all learned the “language” of these icons. When we see a picture of an envelope or a calendar page, we know what to expect. And fortunately for web designers, you don’t have to start from scratch when you need icons to use for your own site. There are plenty of font libraries out there—some of them available for free. Many of these fonts even contain logos for social platforms, like the Facebook “f,” Twitter bird, and Google “g.”
Good for users, good for you
Why else do icon fonts trump images? Chris Coyier at CSS-Tricks gives a great explanation. With just a few deft change to your code, you can change icons’ size and color, add shadows, use transparent knockouts, rotate, and more.
Plus, icon fonts’ minimalist, no-frills look is right in line with what’s popular in design right now (think Windows 8 Start menu icons or Apple’s new iOS).
Getting started with icon fonts is pretty simple. Download the font packs you want, then use the “data-icon” attribute to tell your CSS how you want icons to behave. You can take this a step further to be sure icons are interpreted correctly by screen readers—more on that here.
You can also use a service like IcoMoon, which allows designers to create one-of-a-kind icons (or use IcoMoon’s own), then store them remotely on IcoMoon’s servers. Then, you can swap out icons easily, without having to change your CSS.
This might sound complicated, but once you get the hang of using icon fonts, you’ll wonder why you ever bothered with pesky jpegs and vector files. Your site visitors will see faster loading times and great displays on any screen.
Sometimes icons speak louder than words. Need help integrating them into your site? Give Atomic a call today.