panel.jpg Follow us on Twitter and Facebook

/// Blog

October 6, 2013
Category: Development Written by: Tagged: css gemicons icomoon icon-fonts icons svg

Create Icon Fonts from png files using a variety of tools

Icon fonts are amazing. We love them out here!

In this post, I will cover the process of creating custom font icons.

The icons

First, lets get a couple of png images into the folder that we want to convert to the icon font. I will use few custom images on a 128 by 128 grid.

The conversion

Convert png to svg

We will use a custom script called png2svg3.sh to generate svg files from the png images. This script uses Peter Selinger's Potrace to convert the bitmaps to vector graphics.

The script first converts the png images to pnm format using the convert utility on Ubuntu. Then using potrace the pnm files are converted to svg files.

Optimize svg

The svg files generated can be significantly optimized. For this, we will use a script called optimize_svg.sh. This script uses svgo to optimize the files.

Create icon font from svg

Now, to the final step for creating the icon font. We will use IcoMoon

Just import the icons and generate the font in icomoon … I use the Chrome extension.

Results

The icon font generated looks cool … like this!

Custom Icon Font Generated using Icomoon

Click here for a live preview of the custom icon fonts generated

Click here for download

/// Our Twitter Feed

Find out what's happening, right now, with the people and organizations you care about.

Twitter
Copyright 2012 MyPad.in