How to show a glyph from FontAwesome correctly

Question

I'm trying to use a icon from FontAwesome, but it shows a box instead of the real icon. Related codes are as follows:

In Fonts.xaml

<FontFamily x:Key="FontAwesome">pack://application:,,,../Fonts/#Font Awesome 6 Free Regular</FontFamily>

In LoginPage.xaml

<TextBlock FontFamily="{StaticResource FontAwesome}" Text="&#xf110;" />

And I've tried to use ttf, otf and set them to embedded resources as shown below:

Could somebody help me? Thanks a lot.

Answer 1

Hi,@Fanhua Kong. Welcome Microsoft Q&A. You could refer to the following methods.

Method 1:

1.You can install FontAwesome.WPF in project's Package NuGet Manager.

2.Import xmlns:fa="http://schemas.fontawesome.io/icons/" into your XAML code.

3.Use it into your TextBlock like this:

<fa:FontAwesome Icon="Spinner" FontSize="40"></fa:FontAwesome>

Method 2:

1.Download FontAwesome Fonts: Start by downloading the FontAwesome font files (usually in .ttf format) from the FontAwesome website: https://fontawesome.com/. You might need to sign up for an account or use a free version of the font.

2.Add FontAwesome Fonts to Your Project: Once you have the font files, you need to add them to your WPF project. Right-click on your project in the Solution Explorer, select "Add" > "Existing Item," and then navigate to the downloaded .ttf font files. Select them and click "Add."

3.Set Build Action and Copy to Output Directory: Select the added font files in the Solution Explorer. In the Properties window, set the "Build Action" to "Resource" or "Embedded Resource," and set "Copy to Output Directory" to "Copy if newer" or "Copy always."

method2-1:

Define FontFamily in XAML: In your XAML files, you need to define the FontAwesome FontFamily using the path to the embedded font. This is typically done in your App.xaml or another resource file:

 <Application.Resources>
        <FontFamily x:Key="FontAwesome1">pack://application:,,,/Fonts/#Font Awesome 6 Free Solid</FontFamily>
    </Application.Resources>

usage

<TextBlock FontFamily="{StaticResource FontAwesome1}" Text="&#xf110;" />
        <TextBlock  Text="&#xf2bd;" FontFamily="{StaticResource FontAwesome1}"/>

method2-2:

 <Window.Resources>
        <Style x:Key="FontAwesome">
            <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Fonts/#Font Awesome 6 Free Regular" />
        </Style>
    </Window.Resources>

usage

  <TextBlock Text="&#xf2bd;" Style="{DynamicResource FontAwesome}" />

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.