DQuinn.net

Web Design

Create a Custom Icon Font in the Gumby Framework with IcoMoon

Learn how to generate a custom font out of the SVGs and serve up an icon font that you could reference in the same way the Entypo font in the Gumby framework.

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.

First, gather up all your SVGs and visit the IcoMoon App. Create a New Project and then import all your SVGs into the application. Don’t forget to specify the metadata for your font by giving your font set a name, and filling out the license information. Then, select all the imported icons, and choose Font at the very bottom.

Screen Shot 2014-03-13 at 10.18.53 AM

You will now need to assign a character key to each font in your set. Because my font has no actual letters or numbers, I just assigned the regular alphabet and a few numbers across all my icons. Underneath each icon you’ll see a character code and a little broken icon box, which you can replace with a letter.

Screen Shot 2014-03-13 at 10.19.23 AM

Export your font, and you’ll get .eot, .woff, and .ttf files. Rename the files something simple (in my case, I named them deep), then drop them into the /fonts/icons/ folder in the Gumby framework.

Now we need to do some duplication of the code that handles the Entypo font in Gumby.

  1. In Gumby’s sass /functions/ folder, duplicate icon.scss. You need to make the mixins found here unique to your font. In the below code, you’ll see that I’ve put “deep” as a prefix to each reference to a mixin:

  1. Don’t forget to import this new file to the _all.scss in the /functions/ folder.
  2. In the /ui/ folder, duplicate the _icons_deep.scss file so that your icons will have a unique prefix (in my case, deep-nameoficon rather than icon-nameoficon):

  1. Next, in _base.scss in the root of the Gumby sass folder, you need to include your new font’s icon classes:

  1. Let’s go to /var/settings.scss and add a variable to represent your font file. Search for $icons: entypo, and on a new line, add your font (in my case, this was $deep-font: deep, where “deep” is the actual filename of my font).
  2. In the _fonts.scss file in this same folder, invoke your custom font like so:

  1. Now it’s time to create the references to the characters in your font. In the /var/icons/ folder, you’ll find two files for Entypo: _entypo-icon-list.scss and _entypo.scss. Copy these files and rename them to match your font. (Mine became _deep-icon-list.scss and _deep.scss). The first file, _entypo-icon-list.scss just references the second file, _entypo.scss, so open up your duplicated version of that and start assigning your characters:

  1. The character assignments you give each icon should match the character assignments you specified in the IcoMoon App when you first created your font. Don’t forget to import these new files into your screen.scss, so they get compiled along with everything else.

Once you’ve done all these things, you’ll be able to use your icon font just like the Entypo font. Enjoy!


Also in Web Design


Post a Comment

Your Two Cents

Reply

Your Comments

3 Replies & Counting

  1. César 4 years ago

    Very good article!
    You can display the file “@import “deep-icon-list” ? to complete all steps…

    • Daniel Quinn 4 years ago

      Thanks César, I’ve updated the post with that information.

  2. jeevanandan 3 years, 5 months ago

    Very good information thanks