How to add icons to Zozi's fontpack

how_to_add_icons.md

How to add icons to Zozi's fontpack

###Load the current fontpack into the Icomoon App

1. Download the most current version of the fontpack from app/assets/fonts/
2. Open a browser and go to icomoon.io/app
3. In the top left corner, click the purple button that says "Import Icons"
4. Find app/assets/fonts/fontawesome_some_version.svg and upload the SVG fontpack

###Acquire SVGs of your new icons ####If you have a sketch file:

1. Open the sketch file
2. Double click on the icon that you want, OR find the corresponding folder in the sidebar
3. Once you've isolated the whole icon, find the bottom right corner of Sketch and click "Make Exportable"
4. Set the format to "SVG"
5. Click the download button.
6. Save the icon as "icon-name.svg" or whatever you want to call it.

###Upload the new icons to Icomoon

1. Click the purple "Import Icons" button again
2. Find the new icon SVG files that you just created
3. Click open

###Generate the new fontpack

1. In the Icomoon App, select all the icons that you want included in the new fontpack. This is probably all of the original icons, plus the new ones. Selected icons should be white with a yellow border.
   1. Hold Shift + click the first and last icons in the group to select all, OR
   2. Click the hamburger menu on the far right and click "Select All"
   3. Make sure the new icons are also selected. It's ok if they look like they are grouped separately from the originals.
2. Once you have your selection, click the button at the bottom of the page that says "Generate Font"

###Download the new fontpack

1. Make sure that the button in the top left corner that looks like "U+" is toggled on. This will show the Unicodes for each icon, so that you can edit them if need be.
2. Make sure that the new icons do not have the same unicode as an existing icon, also make sure that pre-existing icons' unicodes don't change (or else you'll have to re-map all the classes in the app, which would be a pain).
3. Once the unicodes are set the way you want them, click "Download" at the bottom of the page.

###Install the new fontpack in the Zozi App

1. Open the downloaded files, which will look like "icomoon.zip/fonts/icomoon.svg" etc. and rename them to "fontawesome_v99.svg" etc.

2. Replace the existing font files at app/assets/fonts/ with these new files.

3. Login to Cloudinary and upload the new font files to z/p/fonts/fontawesome_v99.svg

4. In your IDE, open app/assets/stylesheets/shared/font-awesome.css.scss. Edit lines 4-7 to point to the new font files (you should only have to update the file name but not the path)

5. Add classes for the new icons so that anyone can use them. Around line 305, you'll find the list of icon classes and their corresponding Unicodes. Follow the convention to name the new icon. Make sure to use a class name that is not already used, and use the correct unicode from Icomoon. .icon-name-of-new-icon:before{ content: "\e123"; }

6. Save and commit your changes

###Use the new icon To insert the new icon, use an icon tag and the icon's designated classname %i.icon-name-of-new-icon Style it like you would any font icon.

Mind if we move this to the zozi.com wiki?