Workflow for creating multicolor icon fonts with FontCustom

fontcustom-workflow-multicolor-icons.md

Custom Multicolor Icon Workflow with FontCustom

goal: taking a multicolor icon and generating fonts using the same keyboard character in order to layer and color.

• using illustrator to create the artwork and svgs
• set the artboard to match in Illustrator: Objects > Artboard > Fit ...
• separate the layers, and save out black svgs, knocking out the shapes from each other
• save each layer into a separate folder with name that matches the element, the goal is to make each layer a font

now that you have each layer in its own directory, start making the fonts with FontCustom

├── shen-logo
│   └── shenlogo_ico_symbol_only.svg
├── shen-logofill
    └── shenlogo_ico_dot_only.svg

make individual fonts for each layer with fontcustom first run:

(master)$ cd shen-logo
shen-logo (master)$ fontcustom compile . -n "shen-logo" -o ./shen-logo
      create  .fontcustom-manifest.json
      create  ./shen-logo
      create  ./shen-logo/shen-logo_47df33bd755eb9eb9a6f402aaf6e4e03.ttf
              ./shen-logo/shen-logo_47df33bd755eb9eb9a6f402aaf6e4e03.svg
              ./shen-logo/shen-logo_47df33bd755eb9eb9a6f402aaf6e4e03.woff
              ./shen-logo/shen-logo_47df33bd755eb9eb9a6f402aaf6e4e03.eot
      create  ./shen-logo/shen-logo.css
              ./shen-logo/shen-logo-preview.html

now that you have the .fontcustom-manifest.json you can change the codepoint on the glyph.
the goal is to use the same character for each font.
then using data-icon, :before and :after and 0 line-height you’ll layer the icon.

in shen-logo/.fontcustom-manifest.json change the glyph settings codepoint from the default to the character you want to use.
the unicode table site is a great reference. search a a character and use the utf-8 dec setting.

if you checkout the current preview html file from the original compile, make note of the codepoint field.
that's going to change after you update the manifest.json and run compile again.

# this example shows the lowercase "s" code
"glyphs": {
  "shenlogo_ico_symbol_only": {
    "codepoint": 115,
    "source": "./shenlogo_ico_symbol_only.svg"
  }
},

with the codepoint changed in the manifest, you can run compile again, but this time leave off the -o

shen-logo (master)$ fontcustom compile . -n "shen-logo"

if you checkout the preview html file you should see the codepoint value field updated to the one specified in the manifest.json. in the case of my lowercase "s" i get s.

do this for the other layers using the same codepoint make new fonts for each. ie: shen-logofill

More to follow on the CSS Layout, following an excellent Multicolor-Icons post by Pixel Ambacht