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
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?
- Use any vector drawing tool that you like and exports to SVG
- Use the awesome http://fontastic.me to create a TTF font file
- Use the Windows 8.1
FontIcon
to display the icon
OK? Let’s go. I use Sketch (mac-only unfortunately) to create 3 icons.
Draw some icons and export them to SVG
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:
Create the font from the SVG files
- Open http://fontastic.me and create your user account
- Click the plus button to create a new font
- Go to font settings to change the name
- Click ‘import icons‘ and select your SVG files
Your icons appear in the new collection:
- Select the icons by clicking on them
- Click the download button and save the zip to a location on your hard drive.
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:
Let’s check if the font file is valid by opening it in Font Book:
Hurray! It works!
Using the font in a Windows Store App
- Start a blank XAML Windows Store App in Blend:
- Drag the font to the Solution tree and drop it on the Project:
- Add a FontIcon to the Grid in the Objects and Timeline panel:
NOTE: if you cannot find the FontIcon in your assets, paste the following XAML in the MainPage.XAML Grid:
<FontIcon />
- Find the font face property and choose our ‘transport’ font
- Change the glyph property to ‘a’
-
Increase the font size to 96.
Your XAML should like like this:
<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:
- manage a complete set of icons in 1 file. For different display resolutions!
- change the color of icons without having to use drawing software or ask our designers
- change the size of icons from 0% to 100000000% without losing quality.
Have fun creating your beautiful icon font!