April 6, 2017 · article

Using your own iconfonts

There are some awesome services for iconfonts such as:

But, what if you wanted to create your own. Or you have a designer making some slick icons but you not being able to use them as icon but inline images instead. Page load times would increase, your work load would have to increase, more typing and a big unorganised mess.

There are some online services you can use to create you or your designers can use to create and share icon fonts.
IcoMoon App: http://icomoon.io
fontastic: http://fontastic.me
Fontello: http://fontello.com
Glyphter: http://glyphter.com

All of these need SVGs to create your font. Your designer should be able to create SVGs fairly easily, but if not you can always automate it using ImageMagick and PoTrace.

First ImageMagick to create a bmp

convert -flatten test.png -background white -alpha remove -negate -threshold 0 -negate  -resize 64x64 -crop 64x64+0+0 -gravity center -extent 64x64   test.bmp

Then potrace to trace it into an svg

potrace --svg test.bmp -o test.svg

Finally, if you want a stylesheet with your icons you should use
https://github.com/FontCustom/fontcustom

fontcustom compile svg

Also, iff you'd like some color in your icons, don't forget you can use Stacked Icons.

<span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

Taken from http://fontawesome.io/examples/#stacked

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket
Comments powered by Disqus