I love me some icon fonts. It wasn’t that long ago that designers had to make teeny little PNG icons for things like nav bars and social icons. Want it bigger? Make a new graphic. Want to change the color? Make a new graphic. Add a new social network…well, you get the idea. Let’s just say I’ve made a *lot* of icon PNGs in my career.
And then along came icon fonts to make our lives easier. There are a lot of reasons why icon fonts are awesome but there are also a few things that are kind of a hassle. You need to upload your fonts (in all the right formats) and enqueue the styles in functions.php. Then you still need to style everything in CSS.
It’s not a super-big hassle, but it can drive me more than a little bit nuts when I can’t figure out why my icons are stubbornly showing up as weird characters set in Arial. That’s why I got really excited when I saw that Fonticons was handing out beta invites for their new icon font service. I knew it was going to be good because it’s made by the people who created FontAwesome…but I wasn’t ready to fall madly in love with it less than five minutes after logging in for the first time.
The Fonticons service is *really* useful
It reminds me a bit of a Typekit for icon fonts. It’s one of those simple ideas that makes you want to kick yourself for not thinking of it first. The Fonticons beta hits every feature you’re looking for: support for tons of icons (the beta lets you play with FontAwesome, with more to come), font subsetting so you only need to load the icons you’re actually using (which means your pages load about 10x faster on average*), and everything is served via a content delivery network (so your site speed stays snappy).
Fonticons solves everyday design problems I face
Sometimes a design benefits from using unique, custom icons. It’s not like I have anything against them—I love and use them as much as the next designer. In fact, a lot of cool options will be included in the Fonticons service, which makes me really happy. A lot of times you can find exactly what you need in a free and readily available icon font.
But I think sometimes, with limited timeframes and budgets, we’ll skip using custom icons because a stock icon library is easier to use. I know I’ve lovingly crafted custom icons for a site and had a dev sub them out with a free icon font that’s “close enough” because it’s more time efficient.
Fonticons offers me freedom
Being able to upload custom icons (the number depends on the type of plan you buy) means it’s now as easy to use custom-created icons as it is any other type of icon font. Fonticons makes adding a custom icon as easy as uploading an SVG file. When the pain point of choosing the best icon to communicate the concept is gone, designers have more freedom to create their own unique visual language.
It’s not enough to be useful
The Fonticons beta could have been just a useful, utilitarian product. If it had been, I probably would have bookmarked it and checked it out again when it officially launched. But I sure wouldn’t have felt the urge I did to whip out my credit card and throw my money at Fonticons in less than five minutes. That didn’t happen until I logged in and started subsetting a font.
Surprise and delight
First of all, you don’t have to wonder what to do. When you initially land on the page, the first thing you see is an alert box that gives you clear instructions on your goal for the step. You haven’t added any icons, so here’s a link that lets you do that really easily. Cool. I don’t feel like a dumbass, wondering what I’m supposed to be doing. I have a particular fondness for using things that don’t make me feel me feel stupid, lol!
Next, I love that little animation when you add an icon. They didn’t need to do that (or the slide over animation when you add or remove another icon). They could have just had the icon pop in and out. But that animation? That silly little slide in? It makes me want to click and add and delete icons even when I don’t need to use them.
It’s fun. For some weird reason that little animation makes me happy. When that slide happened, that’s when I fell a little bit in love.
Speaking of deleting icons, I loved the little tooltip bubble. It pops up when you hover over an icon in the kit bar. It’s small and unobtrusive. And it spells out exactly what you need to know; that clicking on the icon will delete it from the kit. Again, they give you that slick little slide out animation as it pops out of existence. Poof! (Hey, that was fun. Let’s add and delete it again!)
Here, take my money
Fonticons made a common task that usually feels like a chore into something I want to do. And since I do it a lot, it’s going to take a pretty solid chunk of time I used to dread and make it into something enjoyable. The features are cool, but *that’s* what makes me want to throw my money at them. Fonticons makes me excited to start a new project. I can guarantee you I’ll be using a lot of cool icons :D