Search code examples
font-awesomeuwp-xamlfont-awesome-5

Font Awesome icons do not show in UWP app

I have recently tried adding an icon from Font Awesome 5 to a UWP project I'm working on. After failing to get the icon I want to show in the app, I tried simplifying things by getting the icon to show in a simple test app, still with no success. All I did to create the test app was:

  • In Visual Studio, create a new Windows Universal Blank App.

  • Added the Font Awesome OTF font file.

    Assets
    Fonts
        Font Awesome 5 Free-Solid-900.otf

  • Modified MainPage.xaml (following instructions provided by Microsoft) like so:

    <Grid>
    <FontIcon FontFamily="Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" FontWeight="Black" Glyph="&#xF193;" />
</Grid>

When I run the test app, all I see where the icon should be is a square box. According to the icon's page, the solid version I'm trying to use is in the free version of the font and I have correctly set the font weight to match the configuration of the font family.

Other things I've tried:

  • Different paths for the Font Family:
    • Font Awesome 5 Free Solid
    • /Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
    • ms-appx:///Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
  • Different minimum version on the UWP project configuration.
  • Different version of Visual Studio. I am using Visual Studio 2017 for my (real) app because it has certain legacy requirements. Couldn't get this font thing to work in Visual Studio 2019 either.
  • Different font character. I tried the alternate accessibility symbol provided by Font Awesome which, according to its information page, is in the Font Awesome 5 Brands-Regular-400.otf font file. And yes, for this case I did reset the font weight to Normal (400).
  • A different control. Tried using a TextBlock instead of FontIcon with same settings (Font Family, Font Weight, Text instead of Glyph, etc.)

Nothing has worked; I have never seen any of the Font Awesome icons I've tried to use appear in my app, every time showing the square box. Is there anything else I haven't tried?

Solution

  • You may be using the wrong font name.

    Font Awesome 5 Free-Solid-900.otf Its real font name is not Font Awesome 5 Free Solid, but Font Awesome 5 Free, please use the following code：

    FontFamily="/Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free"

    In addition, please make sure your font file's Build Action (right-click the file, choose Properties) is Content, it can guarantee that your font file will be added into the package correctly.

    Best regards.