Skip to content

Icon font guide

Jump to bottom
Thomas Schluchter edited this page Jul 6, 2017 · 6 revisions

Our icon fonts are generated by fontello.com using a basic set of icons from The Noun Project that is extended as needed.

Follow these instructions to add a new icon to the set.

0. Prepare the artwork

Fontello prefers compound paths. The recommended approach is to import the source artwork into Adobe Illustrator, and

  • ungroup any clipping masks (Object > Clipping Mask > Release), and delete the background layers
  • turn the object into a compound path (Object > Compound Path > Make)

Then, export as SVG.

1. Add icon to fontello

To view and edit the set of icons, drag and drop the icons/config.json file in the scss repo onto fontello.com. Under "Custom Icons" you will see the selection of icons we are currently using.

The icons that appear with a red circle around them are included in the font files generated by Fontello. Clicking on the icon's preview toggles between states, either including or excluding glyphs next time you download the font files.

With the tab Select Icons active, drag the SVG you created in step 0 onto the browser window and release. The new icon will appear in the list of Custom Icons.

Switch to the tab Customize Names and search for the icon you just added. Change the name to a memorable, descriptive string without spaces. This name will be the CSS class on the <i> element. Note: The icon font uses the icon- prefix. Do not use the word "icon" in your custom name.

Switch to the tab Customize Codes and take note of the hex code for the icon. Normally, there should be no need for you to actually change the hex code.

You are now ready to export the glyph set as icon fonts. Click Download webfont (n), where n stands for the number of icons you are exporting. If that number seems wrong, check whether you accidentally de-activated any of the glyphs (see above).

2. Replace the icon font assets in the SCSS repository

Unzip the file downloaded from fontello. You will find a number of files and folders. The files that are interesting to are config.json and the assets in the font folder.

Drag the config.json and the files in the font folder into the icons folder of the scss repo.

3. Add the new glyph to the CSS

The CSS needs to know where in the character set to find the glyph you added. For that you need the hex code of the glyph (see step 1 for instructions of where to find it.)

Open the atoms/_icons.scss partial in a text editor and look for the declaration of the $icons variable. To register the new glyph, add a new line with a key-value pair consisting of the icon's name and its hex code.

  • Enter the name of the icon as entered on fontello (i.e. without the icon- prefix)
  • Enter the hex code in \XXXX notation, where XXXX is the four-digit code displayed on fontello.
Clone this wiki locally