Creating Your Own Icon Font Using Metro Studio

Berkunath A
August 16, 2018 UPDATED

Using high quality images is an effective way to keep users’ attention and build their interest in reading the content of webpages and applications. However, the images should be lightweight for quick responsiveness and look crisp on high resolution displays. The best solution is to use icon fonts instead of images.

Key reasons to use icon fonts

Icons are scalable, without loss of quality in high resolution display.
Icons are sharp and crisper.
Icons are lightweight and they all can be loaded in a single file.

You can create your own icon font using our Metro Studio application to create a metro project and export it to icon font. This blog post is about to teach you how you can create your own icon font and how to use it in your application.

Creating a metro project

After launching the Metro Studio application, you can find icons with different categories. You can create your metro project by following the below steps:

Select the required icons to create an icon font.
Drag the required icons to the “Drop to create a project” option on bottom left of application.
Name your project.

Creating Metro Project

Now your metro project is ready to create icon fonts.

Creating the icon font

Once you select all the required icons, you can create your icon font with the following steps:

Click the Create Font option in your metro project.
By default, each icon is assigned with Unicode. Before downloading the icon fonts, you can rename the icons and define Unicode character for each. Also, you can reset the Unicode of icons using the option on the bottom left of the dialog window.
Once character mapping is done, you can create your icon font with the Generate Font option on bottom right of dialogue.
Name the icon font and choose the location to which to download the icon font.

Icon Font Generation

Icon fonts generated by Metro Studio have various font formats (to support cross-browser compatibility) and demo files.

Icon Font Files

Generated icon fonts can be used in webpages by mapping the icon fonts in your HTML, CSS, and JavaScript. They can also be used in WPF, UWP, and Xamarin applications. Let’s look at how to use the generated icon fonts in a UWP application.

How to use icon font

Once the font file containing icons is embedded in your application, you can use it in different controls that support font family changes. If you had a UWP project, for instance, you’d follow these steps to embed the font file in your project and use our icons in your control:

Copy the true type font file (ttf file) from the fonts folder to your application location.
Include the font file in your project.
Set the Build Action as “Content” for the font file.

Set Build Action as Content

Once you reference the font file in your project, you can change the Font Family of the control to use icons from our font file. Font Family can be set to the control in the following format.

FontFamily ="[PathToTTF]#[NameOfFontFamily]"

We can define our font family in code behind also, as in the following code samples.

string fontFilePath = "ms-appx:///Gallery.ttf#Gallery";
fontIcon.FontFamily = new FontFamily(fontFilePath);

Use the Unicode or Glyph of corresponding icon as text or content value of the control to display the icon.

<TextBlock Foreground="White" FontFamily = "Gallery.ttf#Gallery" Text="&#xe701;" FontSize="18" />
<TextBlock Foreground="White" FontFamily = "Gallery.ttf#Gallery" Text="&#xe701;" FontSize="18" />
<TextBlock Foreground="White" FontFamily = "Gallery.ttf#Gallery" Text="&#xe702;" FontSize="18" />

Icon Font Used in UWP Application

Wrapping up

For more information and details about other features, please refer to our documentation, where you will see customized Character mapping and CSS properties.

The sample code showing how to use the icon font in a UWP application can be downloaded at the Icon Font Sample.

You can download the Metro Studio setup here. Feel free to share your feedback in the comments below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!