Create and use icon fonts in a Windows Store App

Are you using PNG icons in your Windows Store application and looking for a way to improve the quality on retina displays? After reading this article, you will know all there is to know about creating a custom Icon Font to use in your Windows Store Application

thanks retina

Windows 8.1 supports a large variety of new hardware, including lot’s of different screen resolutions and maintaining PNGs for smaller and larger displays (think retina support) can be a real pain.

Luckily there is a solution to drastically simplify asset management and where you don’t have to worry about scaling pixels.

So how does it work?

OK? Let’s go. I use Sketch (mac-only unfortunately) to create 3 icons.

Draw some icons and export them to SVG

draw icons

It is not important what program you use. U can also download free existing SVG’s if you want. The result is a folder that contains your icons:

folder

Create the font from the SVG files

name

import

Your icons appear in the new collection:

new collection

select

Fontastic provides an awesome zip file with lots of goodies in it. For Windows 8 we will use the TTF file in the fonts folder:

zip

Let’s check if the font file is valid by opening it in Font Book:

font book

Hurray! It works!

Using the font in a Windows Store App

blend

drag

fonticon

NOTE: if you cannot find the FontIcon in your assets, paste the following XAML in the MainPage.XAML Grid:

<FontIcon />

transport

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <FontIcon FontFamily="transport.ttf#transport" FontSize="96" Glyph="a"/>
</Grid>

Conclusion

We now have a font containing our icons. This means we can:

resuklt

Have fun creating your beautiful icon font!

Written by Loek van den Ouweland on November 02, 2013. Questions regarding this artice? You can send them to the address below.
By using this site, you acknowledge that you have read and understand our Cookie and Privacy Policy.