It all started when I saw the latest version of Font Awesome (the icon font I use, love, and recommend) and realized that of 40 new icons, 13 were brand icons, and most of them are, to be fair, useless. Who needs an icon for Leanpub? Or Shirtsinbulk, whatever that is? Now, these icons don't take that much space in the font, and the whole font is still pretty small — 72 KB for WOFF file — which is probably smaller than a random picture on your website. But if I need only a few icons from there, why should I include the whole font? It feels wasteful. So I started looking for a way to extract icons from fonts and found this gem — Fontello.

What is Fontello?

Fontello is a webapp that lists open source icon fonts, shows glyphs from them, allows you to select the icons you need from any font, and creates a new custom font from your selection. You can then use this custom font on your website. Fontello — custom icon fonts You can also drag there custom SVG icons or SVG fonts (by the way, you can create them in Inkscape, my favorite vector graphics editor).

What fonts are available in Fontello?

Fontello currently includes the following icon fonts:
  • Fontelico
  • Font Awesome
  • Entypo
  • Typicons
  • Iconic
  • Modern Pictograms
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Elusive
  • Linecons
  • Web Symbols
Some of them look good together, others are unique.

How to create a font with Fontello

  1. When you open Fontello, you are presented with icons.
  2. Click on icons you want to select them.
  3. Click on "Customize Names" when you're done if you want to rename icon classes.
  4. Click the big red button — "Download webfont" — to download the result.
You'll get a ZIP archive with a handy demo page, CSS, and the font itself in all supported webfont formats: ZIP archive of custom fonts from Fontello

How to use Fontello fonts

To use the resulting font on your website, first include the CSS in your page's head: 
<link rel="stylesheet" href="css/fontello.css">
(If your font has animated icons, such as spinners, don't forget to include css/animation.css.) Make sure to copy fonts directory into the right place on your web server. To insert icons, use <i> tag with a special class: 
<i class="icon-eye"></i>
If you have animated icon, include animation class, for example: 
<i class="icon-spin2 animate-spin"></i>
Check out demo.html included in the downloaded ZIP for examples.

Project information

Fontello is available at http://fontello.com. The project is open source; code is available at https://github.com/fontello/fontello. If you found it useful, don't forget to donate to the project.