Xamarin Forms Font Awesome 图标在 UWP 中无法正确显示

Question

我有一个 Xamarin Forms v4.2 解决方案，我想在其中使用一些 Font Awesome 5 图标。我已经在正确的位置添加了 Font Awesome TTF 文件，我相信文件属性已根据平台正确设置。但是当我尝试使用 FA 图标时，iOS 和 Android 显示正确并且 UWP 显示一个正方形代替图标。我包含了 App.xaml、Page.xaml 和常量帮助程序文件的代码片段，以及 UWP 文件位置的图片和每个平台显示内容的图片。我相信这与 UWP 找不到字体文件有关，因为其他两个平台运行良好。但我已经能够解决这个问题。

--- 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>

图片 1 - iOS 图 2 - UWP 图 3 - Android 图 4 - UWP 项目文件位置

Answer 1

我下载了 fa-regular-400.ttf，将它添加到 Android，UWP，它在我这边运行良好。

在AndroidAssets中添加fa-regular-400.ttf，将属性更改为AndroidAssets，同时在UWP中添加fa-regular-400.ttf资产。

在 App.Xaml

中创建 FontFamily 样式

 <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>

在 Label 样式中使用 FontAwesome5FreeRegular 样式，我在 Android 和 uwp 中得到相同的结果。

您还可以查看以下文章以获得帮助。

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

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

关于图标unicode，请参考：

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

Xamarin Forms Font Awesome 图标在 UWP 中无法正确显示

Xamarin Forms Font Awesome icons not displaying correctly in UWP

xamarin.forms

font-awesome-5