Font Awesome and WPF

Chris Rodgers · 10 November, 2014

Font Awesome is a font based icon library and it is, as its name suggests, awesome.

I’ve made extensive use of it on asp.net mvc applications and decided to make use of it on the wpf application I’m currently working on.

Adding the font to your application is as easy as pie, but you lose the handy named shortcuts, so have to enter the unicode value manually. This is, of course, unacceptable, so I took 10 minutes out to cobble together a library that includes the Font Awesome font and has a simple static class exposing all 500 (or thereabouts) icons using the name assigned in the project (minus the ‘fa-‘ prefix). The source code is available on Github and there is even a NuGet Package available.

It can be referenced and used as follows:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:fa="clr-namespace:FontAwesome.Net;assembly=FontAwesome.Net">
  <UserControl.Resources>
    <FontFamily x:Key="FontAwesome">pack://application:,,,/FontAwesome.Net;component/Fonts/#FontAwesome</FontFamily>
  </UserControl.Resource>
  <StackPanel Orientation="Horizontal">
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="10"
               Text="{x:Static fa:FontAwesome.github}" />
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="14"
               Text="{x:Static fa:FontAwesome.github}" />
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="18"
               Text="{x:Static fa:FontAwesome.github}" />
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="24"
               Text="{x:Static fa:FontAwesome.github}" />
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="32"
               Text="{x:Static fa:FontAwesome.github}" />
    <TextBlock FontFamily="{StaticResource FontAwesome}"
               Margin="5"
               FontSize="40"
               Text="{x:Static fa:FontAwesome.github}" />
  </StackPanel>
</UserControl>

Which results in: Github icons

Twitter, Facebook