Puddle Guidelines

Icomoon Documentation

Our icons font is managed by an app called IcoMoon. We’re also using icomoon to host our fonts though S3 and cloudfront. This document will give instructions on how to makes updates such as additions, deletions, and more.

Requirements / Introduction

You need an account to move forward. For security reasons, please see IT for a login/password. After you’ve logged in you’ll see a screen like this:

1. This is the menu for managing other sets (right now we just have the 1), docs, and other useful info
2. This is how you can add custom icons
3. This is the toolbar for editing a specific icon or removing an icon
4. This is how you can add icons from other libraries
5. This is where you preview the font and get the links

Here’s more detail about the toolbar in #3

Adding Icons

You can add icons in two different ways

1. Uploading custom icons
2. Upload a custom icon into the current set
3. Choose from other icon libraries

Uploading custom icons

1. Click on the Import Icons button in the header
2. Choose the file you’d like to upload within the open file dialog
3. The new icon will appear in a new set above cw-icon. The arrow is pointing to where you can update the meta info such as the new set’s name. Only use this option to categorize similar icons like social, media (play, pause, stop), arrows, etc…

Select the new icon and now it’s added to the project.

Upload a custom icon into the current set

1. Click on the right hand menu of the main cw icon set. There’s a menu option for ‘Import to set’
2. After you choose the icon, you can make your edits
3. Make sure to select it. If you don’t it won’t be saved in the actual font

Choose from other icon libraries

1. Click on the ‘Add icons from library’ link at the bottom of the project screen
2. This will open up this page

This will add a bunch of new icons to the font project. Click on the menu to make edits.

You can expand your new library, and choose any icons that need to be added. You can also remove additional icons that aren’t needed with the remove tool. That will look something like this

If you ever wanted to use other fonts from that library you have the option to restore it

If you do restore, it’s going to put your previous selection into a new set

Basic User Interactions

Moving Icons

Use the move tool from the top tool bar. You can do this for better organization. Choose the move tool, click and drag.

Removing Icons Use the remove tool from the top tool bar. You click click once to remove or click and drag to remove multiple icons at once. This is useful for adding in other kits and removing out the clutter of icons that aren’t going to be used.

Editing Icons Use the edit tool from the top tool bar. It will open up a dialog that allows you to move and scale the icon within it’s box.

Editing icons for usage

You’ll want to keep the new icons you add clean. So make sure to update the icon name to something descriptive and also add ligatures so they can be used in photoshop or sketch. Use the fi button to toggle ligatures

Edit the icon name and ligatures like this:

Warnings

Don’t remove icons without telling a front end engineer. This will break that icon wherever it’s used on our site. Don’t update the font name or class prefix in the preferences. This will break places where we’ve called our the icon by name or insert it through javascript

Don’t reset codes

Don’t rename icons. That’s basically the same as removing because our code won’t know what the renamed icon is.