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:
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.