To use the font on websites and products, insert the icon class name into any HTML tag to add the icon. The default CSS class prefix is 'icon-'. Stack two glyphs on top of each other to create the duotone icons.
Use font-size in multiples of the grid: grid 16x16px = 8px, 16px, 32px, and grid 20x20px: 10px, 20px, 40px.
- Create artboard in Illustrator and set a grid of 16x16px
- Start with a medium size solid shape
- The bold line version should be the biggest and taking up more space
- Duplicate the solid icon to use as base to create the line version
- Swap stroke and fill (Shift + x)
- Use 1px stroke for thin line and 2px for bold line
- Adjust round corners (Effect > Stylize > Round Corners...)
- Expand all strokes and round corners
- Combine or knockout the shapes
- Create artboard in Illustrator and set a grid of 20x20px
- Design the icon with foreground and background layers
- Put them on different artboards
We use Fontastic.me service to create our iconfont. Contact email@example.com for access to the service.
- In Illustrator, export each artboard as individual .svg file (Save As... > svg (Use Artboards))
- Log in to Fontastic.me and look for the appropriate section
- Click section menu > Add icons to this set > Add the newly created .svg file
- Switch to Customize tab > Name the new icon (keep the icon naming consistent)
- Switch to Download tab and download the file