Using FontAwesome in UWP

This was pretty tricky to figure out but as with most problems like this, once you have the solution it’s pretty simple.

First, you need to install the FontAwesome.UWP Nuget package. Instructions on how to do this are on the Nuget page I’ve just linked to.

Next, on the Page or UserControl you want to use FontAwesome, you’ll need to add a reference at the top:

 ...others omitted...
 d:DesignHeight="300" >

If your using the icons in a static manner, Robert Muehsig has a great guide to do this here.

Essentially, once you’ve referenced the Nuget Package, all you need to do is use the icons wherever you need them as below:

<fa:FontAwesome Icon="Flag" FontSize="90" Foreground="Chartreuse" HorizontalAlignment="Center" />

However, if you want to change icons programmatically then I couldn’t find a way to do this if you’ve created the icon initially in the front end/designer. You need to create the icon programmatically as well.

This is pretty simple thanks to the guys who made the Nuget package:

//insert activity icon
FontAwesome.UWP.FontAwesome fa = new FontAwesome.UWP.FontAwesome();
fa.Glyph = unicodeIconCode;//if you have the character in unicode
stackPanelX.Children.Insert(0,fa);//this line inserts the icon into my stack panel where required

The above works if you have the icon code as unicode, which I did. You can also use the built-in enums to select the icon:

//instead of
//fa.Glyph = unicodeIconCode;
//use this
fa.Icon = FontAwesome.UWP.FontAwesomeIcon.AddressBook;

Styling your icons

You can add styling to the icon like this:

fa.Style = (Style)Application.Current.Resources["Skyron_Icon2_Fa"];

You’ll need to create this style in you App.xaml file:

<Style TargetType="fa:FontAwesome" x:Key="Skyron_Icon2_Fa">
 <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
 <Setter Property="FontSize" Value="22"/>
 <Setter Property="VerticalAlignment" Value="Center" />
 <Setter Property="Foreground" Value="White" />

Again, you’ll need to reference the Nuget package at the top of the App.xaml file:

...others omitted...


Entire code used in my project:

//insert activity icon
FontAwesome.UWP.FontAwesome fa = new FontAwesome.UWP.FontAwesome();
fa.Glyph = Trip.Activity.IconCode;
fa.Style = (Style)Application.Current.Resources["Skyron_Icon2_Fa"];

And the front end contains the stackpanel:

<StackPanel Name="stackPanelX" Grid.Row="1" Margin="5,0,0,0" Orientation="Horizontal" >
<!--Icon is injected programmatically-->
<TextBlock Name="tbTripReasonText" Text="Get Started" Style="{StaticResource Skyron_H3}" Foreground="White"/>

This should now all just work. Here’s the result in my project running in the Windows Phone 10 emulator:

Leave a Reply

Your email address will not be published. Required fields are marked *