CODEWITHSUNDEEP
xamarin.formsfont-awesome-5
Orgbrat
Orgbrat

Reputation: 343

Xamarin Forms Font Awesome icons not displaying correctly in UWP

I have a Xamarin Forms v4.2 solution where I want to use some Font Awesome 5 icons. I have added the Font Awesome TTF file in the correct location I believe with the file properties set correctly based on the platforms. But when I try to use an FA Icon iOS and Android displays correctly and UWP displays a square in place of icon. I have included code snippets for App.xaml, Page.xaml and the constants helper file along with picture of the UWP file location and a picture of what each platform displays. I believe this has something to do with UWP not finding the font file since the other two platforms work perfectly. But I have been enable to remedy this issue.

--- App.xaml ----
<OnPlatform x:Key="FontAwesome5FreeRegular" x:TypeArguments="x:String">
    <On Platform="iOS" Value="FontAwesome5Free-Regular" />
    <On Platform="Android" Value="fa-regular-free-400.ttf#Regular" />
    <On Platform="UWP" Value="Assets/Fonts/fa-regular-free-400.ttf#Font Awesome 5 Free Regular" />
</OnPlatform>

--- Helper class for constant codes ---
public static class IconFontAwesome5FreeRegular
{
    public const string Heart = "\uf004";
    public const string Star = "\uf005";
}

--- Page.xaml  ----
<StackLayout HeightRequest="100" Orientation="Vertical">
    <Label
        FontFamily="{StaticResource FontAwesome5FreeRegular}"
        FontSize="44"
        HorizontalOptions="CenterAndExpand"
        Text="{x:Static fontawesome:IconFontAwesome5FreeRegular.Heart}"
        TextColor="Red"/>
</StackLayout>

Image 1 - iOS Image 2 - UWP Image 3 - Android Image 4 - UWP project file location

App images

Upvotes: 1

Views: 2715

Answers (1)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

I download fa-regular-400.ttf, add this in Android, UWP, and It works fine at my side.

Add fa-regular-400.ttf in Android Assets, change property as AndroidAssets, also add fa-regular-400.ttf in UWP Assets.

Create FontFamily style in App.Xaml

 <Application.Resources>

    <ResourceDictionary>

        <Style x:Key="FontAwesome5FreeRegular" TargetType="Label">
            <Setter Property="FontFamily">
                <Setter.Value>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS" Value="Font Awesome 5 Free" />
                        <On Platform="Android" Value="fa-regular-400.ttf#Font Awesome 5 Free Regular" />
                        <On Platform="UWP" Value="Assets/fa-regular-400.ttf#Font Awesome 5 Free" />
                    </OnPlatform>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>



</Application.Resources>

 <Label
        BackgroundColor="White"
        FontSize="36"
        HeightRequest="100"
        Style="{StaticResource FontAwesome5FreeRegular}"
        Text="&#xf004;"
        TextColor="Black">           
    </Label>

Using FontAwesome5FreeRegular style in Label style, I get the same in Android and uwp.

You can also take a look the following article to get help.

https://www.wintellect.com/using-fontawesome5-xamarin-forms/

https://www.msctek.com/font-awesome-xamarin-forms-xaml/

About icon unicode, please refer to:

https://fontawesome.com/v4.7.0/cheatsheet/

Upvotes: 2

Related Questions