Make your own Icon Font

When programming Apps, or any software with a UI for that matter, we (the developers without designers) are challenged to make things look good. One important part of that challenge is icons. They are used for Buttons, in AppBars or as status indicators. In the world of high DPI devices with different scaling factors we need to make sure our icons are always sharp and crisp. While scaling mechanisms for pixel formats such as PNG are provided in some frameworks such as in WinRT or UWP, it is very painful to create all the different scaling factors of a pixel graphic to give the illusion of lossless scaling. If you are lucky you have a vector graphic already that can be exported without quality loss to the different scaling sizes. But it’s still a tedious job. Likely that vector graphic is an SVG file or can be easily converted to an SVG file. Vectors are great, SVG is great! Unfortunately, there is no built-in way to render SVG graphics in WinRT or UWP. To solve this problem, we can turn our vector graphics into a font that is totally scalable in UWP or WinRT apps. To do this we will follow a three step process:

Step 1  – the Vector

First we need a vector graphic of our desired icon in the SVG file format. Inkscape https://inkscape.org/en/ is a free open source editor I usually use. In case your design skills are limited like mine you might wanna skip Step 1. However, I often use Inkscape for simple icons or modify existing graphics. If you look for high quality icons, then http://thenounproject.com/ is an excellent source. But do not forget to pay or credit the authors of the icons. Once you try to create a good one yourself you will know how hard it is.

image

Step 2 – the svg to font tool

Now that we have our vector graphic we can use it on the following website https://icomoon.io/app/ The App provided by IcoMoon allows us to convert SVG into a font. First click on “New Empty Set”. Then click Import Icons on the set. Once you have all your icons imported you can order them as you like. The codes in font will be assigned according to the order and the selection you choose. I recommend to create an account as you might want to keep your sets and add more icons to your font.

imageimageimage

Step 3 – Download and use the Font

The generated font is packed as part of an ZIP archive. It includes 3 font formats, EOT, WOFF and TTF. It also includes a demo html test page. Only thing we need for a UWP App is the TTF file.  Just drag and drop it into the assets folder of your choice.

image   image

image

Nice! We now have a scaling font on which can apply all the modification we are used to.

image

As usual you can find the final result in my GitHub Repo. https://github.com/bitdisaster/practicalcode

Happy Coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s