How to create Icon Font like font-awesome?

Tools (for generate IconFont)

npm install fantasticon -g
npm install oslllo-svg-fixer -g

Services (for edit SVG)

https://boxy-svg.com/

Be sure your svg icons must optimized for Icon-font generation.

If icon is not showing completely in Icon Font? You must check svg code inside of icon. Search for Defs, Text Or Stroke. Also check Size or Viewport property of svg file.

Features that icons should have;

1. Icons size must be standard size like 16x16 or 32x32
2. At least one of width or height of svg icon must be 16 or 32
3. Icons must be centered.
4. Delete all colors
5. No Stroke (oslllo-svg-fixer)
6. No Defs
7. No Text

Fixing Strokes to Path

Run this if the icon is not showing completely or svg has stroke

oslllo-svg-fixer -s icons/my-broken-icon.svg -d icons

No Color

It is not necessary, but if you get better.

<path fill="#FFFFFF" d="m12 .. ... .. .. "/>
// TO
<path d="m12 .. ... .. .. "/>

No Defs

Sometimes icons are not showing because of this features.

<svg>
  <defs>
    <path id=”a” d=”…….”/>
  </defs>
  
  <g>
    <path d=”M0 0h48v48H0z”/>
    <use xlink:href=”#a”/>
  </g>
</svg>
// TO
<svg>
  <g>
    <path d=”M0 0h48v48H0z”/>
    <path d=”…….”/>
  </g>
</svg>

No Text

I think best online svg editor is https://boxy-svg.com/ easy to use and understandable. Also you can edit and save directly files on your computer disk. You can use this service for converting texts to vector path.

-> File Menu
-> Open from Disk...
-> Choose your broken icon file
-> Select text
-> Shape Menu
-> Stroke to Path

You can use this for strokes also but thats delete boundaries. “oslllo-svg-fixer” is working well for strokes.

Finally… Icons are ready to bake.

I really like “fantasticon” library. easy to use and highly configurable. For generate icon font you can fill constans and run following command.

fantasticon ICONS -o FONT_FOLDER -n FONT_NAME -g scss -p PREFIX
fantasticon icons -o fonts -n my-icons -g css html -p icon

It also generates TypeScript types, JSON maps of the generated code-points, allowing for a great deal of different usages, e.g. integrating with React type-safe icon components or integration on mobile apps by just combining TTF and JSON generation.

Options Details

Usage: fantasticon [options] [input-dir]
Options:
  -V, --version                output the version number
  -c, --config <value>         custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js)
  -o, --output <value>         specify output directory
  -n, --name <value>           base name of the font set used both as default asset name (default: icons)
  -t, --font-types <value...>  specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg)
  -g --asset-types <value...>  specify other asset types to generate (default: css, html, json, ts, available: css, scss, sass, html, json, ts)
  -h, --font-height <value>    the output font height (icons will be scaled so the highest has this height) (default: 300)
  --descent <value>            the font descent
  --normalize [bool]           normalize icons by scaling them to the height of the highest icon
  -r, --round [bool]           setup the SVG path rounding [10e12]
  --selector <value>           use a CSS selector instead of 'tag + prefix' (default: null)
  -p, --prefix <value>         CSS class prefix (default: icon)
  --tag <value>                CSS base tag for icons (default: i)
  -u, --fonts-url <value>      public URL to the fonts directory (used in the generated CSS)
  --debug                      display errors stack trace (default: false)
  --silent                     run with no logs (default: false)
  --help                       display help for command

Configuration file

Some options (specifically, formatOptions and pathOptions) cannot be passed to the CLI directly.

To have more control and better readability, you can create a simple configuration file.

By default, fantasticon will look for one of following files in the working directory:

.fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js

Preview Icon List from Font

You need generate css and html files for this. You can use “serve” for serving static files or you can open “my-font.html” directly.

serve font

Usage of Icons

<i class=”icon icon-fire”>
<i class=”icon icon-arrow”>

Alternative Usage with SCSS

.odd:after {
  font-family: my-icon;
  font-weight: normal;
  content: map-get($my-icon-map, “arrow-down”);
}

BONUS : Gradient color for font icons

.icon-fire {
  background: -webkit-linear-gradient(red, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}