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:
- From the web site: http://fontawesome.io/
- Project on GitHub: https://github.com/FortAwesome/Font-Awesome
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.
- Right click on the provided
Assets
folder and add aFonts
folder. - Right click on the
Fonts
folder and choose Add › Existing Item and choose theFontAwesome.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:
- The YAML data file of Font Awesome:
https://github.com/FortAwesome/Font-Awesome/blob/master/src/icons.yml - Or in Sass:
https://github.com/FortAwesome/Font-Awesome/blob/master/scss/_variables.scss
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"></x:String>
<x:String x:Key="FontAwesomePaperPlaneString"></x:String>
<x:String x:Key="FontAwesomeMapString"></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:
- Ionicons from the Ionic Framework: http://ionicons.com/
- Open Iconic: https://useiconic.com/open/
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!
Comments