How to make your own Icon Webfont

Icon webfonts are a popular way of displaying icons on websites. Some argue, that using inline SVG might be better (eg. on CSS tricks and Sitepoint), but if webfonts are your thing, let's have a look how to easily generate your own.

Why webfonts?

Why even consider converting your icons to webfont? Here are some of the main reasons of using icon webfont:

• vector icons = infinite scalability and crisp display on even the highest DPI displays (in contrast to raster icons like PNG)
• one resource per whole icon pack – no need of loading each icon as separate resource (doesn't apply if you use sprites) = faster loading times
• good browser compatibility – even grandpa IE 6 can handle them!

On the contrary, here are some cons you should be aware of:

• monochrome only – fonts are monochrome by design (unfortunately not for long), so make sure your icons are in 1 color only
• harder maintenance – if you won't automate the webfont generation (which you definitely can, eg. via Gulp etc.), maintaining the webfont (adding/removing icons) can be a bit tedious

Overview of all pros/cons can be found in the two links in the intro paragraph above. No need to rewrite it here.

Ready? So if the webfont is matching your project, let's get to it.

Preparation

First, you'll obviously need some icons. I recommend SVGs in black – no other colors, no gradients, nothing like that. If you're using some premade icons by other designers, it's best to cherry-pick just the icons you'll need and continue only with those. Less icons = smaller webfont size = faster loading webpage times.

Generate webfont

You can find many webfont generators online; some are for transforming desktop font to webfonts, other for transforming icons into webfonts. From my experience the best webfons generator for icons is Icomoon.io.

1. visit icomoon.io/app/
2. choose your icons
   • either select icons you'll need from available presets of free icon packs (first thing you'll see in the app)
   • or import your own icons by clicking Import Icons on the top
3. once you've selected all needed icons, proceed to Generate Font tab on the bottom
4. here you have the option to customize some settings under Preferences on top
   • name your icon webfont (I usually go with "icons" only, for better orientation in CSS files later)
   • customize prefix for icons (defines how icons will be included in your HTML, eg. icon-info and icon-warning, "icon-" there being the prefix)
   • choose CSS selector – this is where Icomoon shines against others, as you can select to use <i> selectors (which I prefer)
   • edit webfont metadata if you want (author, copyright, url etc.)
5. when you're done customizing, click "Download" on the bottom
6. extract downloaded archive and copy fonts/ and <name>.css to your project

Usage and styling

Don't forget to link the downloaded stylesheet in your HTML. Then easily add icons wherever you need by using:

<i class="icon-<icon-name>">

You can style your icons the same way you can style text in CSS:

• font-size, color, text-shadow
• background, border, border-radius
• display, padding, margin
• opacity, transforms, transitions, animations, ...

This certainly gives you more flexibility then with raster PNGs, but still doesn't reach the level of inline SVG. We'll however explore those later.

Have fun with your shiny new webfont icons!