How to integrate Font Awesome into a C# WPF Application (Visual Studio 2019)

If you're a front-end web developer, you've most certainly heard of Font Awesome. To sum it up briefly, it's a font family used primarily on the web as a quick and easy icon solution. It's distributed in a wide variety of file formats for your convenience: SVG, OTF, TTF, EOT, and WOFF/WOFF2.

For this tutorial, we'll be using the OpenType (OTF) format obtained from the free desktop package. (OpenType has several exclusive capabilities such as support for both Windows and Macintosh systems and expanded character sets. Learn more about the differences between OpenType and TrueType.)

1. Download the free official Font Awesome desktop package. (Extract the ZIP archive to a convenient location.) [screenshot]
2. Create a new project in Visual Studio [screenshot]
3. Select WPF App (.NET Framework), click Next, name your project, then click Create [screenshot]
4. Inside the Solution Explorer window, right-click the project name, click Add → New Folder (name the folder "Fonts") [screenshot]
5. Right-click the Fonts folder you created, click Add → Existing Item..., browse to the Font Awesome directory you extracted the ZIP archive contents into, select the "Font Awesome 5 Free-Regular-400.otf" file from the ...\fontawesome-free-5.8.1-desktop\otfs\ directory. You may need to change the File Dialog filter to All Files (*.*) to see the file. [screenshot]
6. Right-click App.xaml, click Open, then in the XAML window add the following line of code inside the <Application.Resources> tag:  <FontFamily x:Key="FontAwesome">/Fonts/Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free</FontFamily>  [screenshot]
7. Switch to the MainWindow.xaml tab, then in the XAML window add the following line of code inside the <Grid> tag:  <TextBlock x:Name="TextBlock1" FontFamily="{StaticResource FontAwesome}" Text="&#xf004;" HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="100"/>  [screenshot]
8. At this point, inside the Design window you'll notice a heart icon in the middle of the MainWindow GUI.

Explanation

For the FontFamily property of the TextBlock we used, we're linking to the static resource key we added in Step 6. (The x:Key attribute value can be changed if you prefer something different.)  You must use the Unicode value of the icons in the Text property for them to display properly. (Font Awesome Unicode values can be found in the icon gallery.)

Resource Item Scope

You're able to reference the Font Awesome resource anywhere in the application because we used <Application.Resources> in Step 6. If for any reason the application-wide scope is undesirable, you can instead insert the code snippet within a <Window.Resources> tag inside any window's XAML to confine the scope to that window only. [screenshot]

<Window>'s FontFamily

Another less popular method would be to set a <Window>'s FontFamily property value to the two-part font resource reference: the base uniform resource identifier (URI); and the font location reference. For example:  FontFamily="/FontAwesome-Example;component/Fonts/#Font Awesome 5 Free Regular"  (The downside to this method is that every component in the window will then inherit the FontFamily.) [screenshot]

Referencing Font Resources from Code

You can also set the FontFamily of components in your C# code. For example:  TextBlock1.FontFamily = new FontFamily(new Uri("pack://application:,,,/"), "./Fonts/#Font Awesome 5 Free");  This could be useful when creating components dynamically. [screenshot]