On the Windows Universal Platform icon fonts are a native feature. We can use the default icons of Windows but we can also add other icon fonts to customize further the design of an application. Here in this article I’m going to use the Font Awesome open-source icon font as an embedded resource in a XAML / C# universal app.

Icon fonts

Icon fonts are easy to embed and they are vector elements. We can scale them from mobile devices to 4K screens, change the colors, apply effects. The possibilities are endless and they are much more flexible than using bitmap images. This is particularly useful for Universal Apps that can scale from mobile screens to desktop and even to Xbox. That should also work in WPF applications.

We can download the Font Awesome files here:

Extract the FontAwesome.otf file from the Zip archive. The Font Awesome licence allows us to embed it in a app. This is always worth checking.

In a XAML app we can either use the OTF (OpenType) version or TTF (TrueType) version.

Adding the font file as an asset in Visual Studio

Here I’m using the free Visual Studio Community edition but it would be the same on all editions.

I prefer having a dedicated Assets/Fonts folder to add embedded font files.

  1. Right click on the provided Assets folder and add a Fonts folder.
  2. Right click on the Fonts folder and choose Add › Existing Item and choose the FontAwesome.otf file. It will be automatically copied and added to the solution.

Making a specific Resource Dictionary

Right click on your project in Visual Studio and choose Add › New Item, choose Resource Dictionary and name it FontAwesomeDictionary.xaml. In this file for now let’s reference the font we’ve just added:

<ResourceDictionary …>
    <FontFamily x:Key="FontAwesomeFontFamily">ms-appx:///Assets/Fonts/FontAwesome.otf#FontAwesome</FontFamily>
</ResourceDictionary>

It’s safer to reference a file stored inside the application package with the ms-appx:// scheme, particularly while working with these paths in code behind. The absolute path of the font file is /Assets/Fonts/FontAwesome.otf hence the three slashes at the beginning: ms-appx:///Assets/Fonts/FontAwesome.otf. We must also add the internal name of the font as a hash fragment: #FontAwesome. This internal name is displayed when double clicking on the font file in the Windows Explorer, in the title bar of the font previewer window.

Then the complete file path of the font is:

ms-appx:///Assets/Fonts/FontAwesome.otf#FontAwesome

Reference the Resource Dictionary

Reference it as a merged resource dictionary in the App.xaml file for example:

<Application …>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="FontAwesomeDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Referencing glyphs as dictionary keys

All the icons are listed on this page: http://fontawesome.io/icons/.

To get the hexadecimal code of an icon it’s possible inspect the page with the dev tools of your browser, for example in Firefox:

All the codes are also listed here:

Add dictionary keys and values to FontAwesomeDictionary.xaml. For example I’ve added the flag, paper plane and map icons:

<ResourceDictionary …>
    <FontFamily x:Key="FontAwesomeFontFamily">ms-appx:///Assets/Fonts/FontAwesome.otf#FontAwesome</FontFamily>
    <x:String x:Key="FontAwesomeFlagString">&#xF024;</x:String>
    <x:String x:Key="FontAwesomePaperPlaneString">&#xF1D8;</x:String>
    <x:String x:Key="FontAwesomeMapString">&#xF279;</x:String>
</ResourceDictionary>

Displaying an icon

Here I’m displaying <FontIcon> elements (documentation on MSDN) inside <HyperlinkButton> and <Button> elements. In this simple example this is directly in the MainPage.xaml:

<Page …>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel
            Orientation="Horizontal"
            HorizontalAlignment="Center">
            <HyperlinkButton Margin="0,0,32,0">
                <StackPanel Orientation="Horizontal">
                    <FontIcon
                        FontFamily="{StaticResource FontAwesomeFontFamily}"
                        Glyph="{StaticResource FontAwesomeFlagString}"
                        FontSize="14" Margin="0,0,8,0"/>
                    <TextBlock Text="Flag"/>
                </StackPanel>
            </HyperlinkButton>
            <Button>
                <StackPanel Orientation="Horizontal">
                    <FontIcon
                        FontFamily="{StaticResource FontAwesomeFontFamily}"
                        Glyph="{StaticResource FontAwesomePaperPlaneString}"
                        FontSize="14" Margin="0,0,8,0"/>
                    <TextBlock Text="Send"/>
                </StackPanel>
            </Button>
        </StackPanel>
    </Grid>
</Page>

Here’s a screenshot of this really simple app:

One step further

Other icon fonts can also be used. Here are two other great open-source icon fonts:

The same icon font can be used on a web project and an app project. And you can event build your own. But that would be another story!