DQuinn.net

Daniel Quinn's Blog

Create a Custom Icon Font in the Gumby Framework with IcoMoon

in Web Design

The Gumby Framework makes it really easy to use icon fonts in place of tiled sprites. By using icon fonts in place of tiled sprites, you reduce the overall download weight of your website, have less CSS to deal with, and don’t have to worry about retina devices since fonts are already scalable vectors.

Gumby uses the Entypo font by default, which is fantastic, but sometimes you need icons that aren’t provided for in the set. For example, at Leap we decided to refresh the Deep Information Sciences website with a responsive redesign, and our resident designer had created a whole suite of custom SVGs for all the icons in the site. I wanted to generate a custom font out of the SVGs that I could reference in the same way the Entypo font is referenced in the Gumby framework.

In Gumby, to use an icon font, all you have to do is insert an <i> element with the proper class, like so:

And there are other ways to do it too.

However, I wanted to be able to write <i class=”deep-myicon”></i> and pop out a character from my custom icon font. Here’s how I went about doing that.

Continue

Design Portfolio

Browse My Latest Work

About the Designer

Daniel J. Quinn is a freelance web designer specializing in WordPress and content strategy. Over the past six years, he's worked as a UI developer for Boston-based digital agencies, supporting all sorts of brands across a variety of industries.

I can help you build a platform that performs the way you need it to, so you can focus on what you really care about, which is doing business. Small businesses are poised to take advantage of the low-cost customization that a platform like WordPress offers, and you don’t need a team of developers to put it together for you. Get in touch and let’s start talking about your website.