October 6, 2013
Icon fonts are amazing. We love them out here!
In this post, I will cover the process of creating custom font 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.
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
pnm files are converted to
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.
The icon font generated looks cool … like this!
Click here for download