How to integrate Font Awesome into a C# WPF Application (Visual Studio 2019)
Tags: csharp, wpf, beginners, tutorial
Published: 2019-07-02 18:12:11

If you're a front-end web developer, you've most certainly heard of [Font Awesome](https://fontawesome.com/). 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](https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started). (OpenType has several exclusive capabilities such as support for both Windows and Macintosh systems and expanded character sets. [Learn more](https://www.fonts.com/support/faq/font-formats) about the differences between OpenType and TrueType.)

1. [Download](https://fontawesome.com/download) the free official Font Awesome desktop package. (Extract the ZIP archive to a convenient location.) [[screenshot](https://imgur.com/PyEiu1o)]
- Create a new project in Visual Studio [[screenshot](https://imgur.com/Uf55Km0)]
- Select _WPF App (.NET Framework)_, click _Next_, name your project, then click _Create_ [[screenshot](https://imgur.com/meIFFPT)]
- Inside the _Solution Explorer_ window, right-click the project name, click _Add → New Folder_ (name the folder "Fonts") [[screenshot](https://imgur.com/Wta6iHb)]
- 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](https://imgur.com/Dd7Aua7)]
- 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](https://imgur.com/FP6Gm7n)]
- 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](https://imgur.com/I6jinU5)]
- 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](https://fontawesome.com/icons).)

**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](https://imgur.com/Y6iV9nQ)]

**<﻿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](https://imgur.com/V3vo48U)]

**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](https://imgur.com/zQm7ANY)]