Question

我使用以下教程在我的xamarin表单项目中使用真棒字体图标：https://medium.com/@tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

我正在使用xamarin Forms 4和字体真棒图标5。实际上仅在android上进行了测试。

有时会显示该图标，有时只显示带有斜线或亚洲字符的正方形。这很奇怪，因为当我有一个列表并且要显示一个字符的每个项目时，对于第一个项目，该字符将正确显示，但同一页面上的所有其他项目都不会正确显示该字符！

怎么了？

示例外观：

您可以看到列表中的第一个图标已显示，但其他所有图标均未显示，而只是ListView中的一个DataTemplate。

我的代码：

App.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX.App">
    <Application.Resources>
        <ResourceDictionary>

          <!-- Icons -->
            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeBrands">
                <On Platform="Android"
                    Value="FontAwesome5Brands.otf#Regular" />
            </OnPlatform>

            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeSolid">
                <On Platform="Android"
                    Value="FontAwesome5Solid.otf#Regular" />
            </OnPlatform>

            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeRegular">
                <On Platform="Android"
                    Value="FontAwesome5Regular.otf#Regular" />
            </OnPlatform>

            ...

        </ResourceDictionary>
    </Application.Resources>
</Application>

FontAwesomeIcons.cs：

namespace XXX.Utils
{
    /// <summary>
    /// The unicode values for all FontAwesome icons.
    /// <para/>
    /// See https://fontawesome.com/cheatsheet
    /// <para/>
    /// This code was automatically generated by FA2CS (https://github.com/matthewrdev/fa2cs).
    /// </summary>
    public static partial class FontAwesomeIcons
    {
        /// <summary>
        /// fa-500px unicode value.
        /// <para/>
        /// This icon supports the following styles: Brands
        /// <para/>
        /// See https://fontawesome.com/icons/500px
        /// </summary>
        public const string FiveHundredPX = "\uf26e";

        /// <summary>
        /// fa-abacus unicode value.
        /// <para/>
        /// This icon supports the following styles: Light (Pro), Regular (Pro), Solid (Pro)
        /// <para/>
        /// See https://fontawesome.com/icons/abacus
        /// </summary>
        public const string Abacus = "\uf640";

        /// <summary>
        /// fa-accessible-icon unicode value.
        /// <para/>
        /// This icon supports the following styles: Brands
        /// <para/>
        /// See https://fontawesome.com/icons/accessible-icon
        /// </summary>
        public const string AccessibleIcon = "\uf368";

        ...
        }
}

用法：

<?xml version="1.0" encoding="utf-8" ?>
<base:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:base="clr-namespace:XXX.Pages.Base;assembly=XXX"
                xmlns:utils="clr-namespace:XXX.Utils"
                x:Class="XXX.Pages.XXXPage">

    <base:BasePage.Content>
        <StackLayout>
            <ListView ...>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <StackLayout HorizontalOptions="StartAndExpand" 
                                             Padding="10"
                                             x:Name="ItemStackLayout">

                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="{x:Static utils:FontAwesomeIcons.Map}"
                                               FontFamily="{StaticResource FontAwesomeSolid}"
                                               WidthRequest="35"
                                               VerticalTextAlignment="Center"
                                               HorizontalTextAlignment="Center"/>
                                        <Label Text="{Binding XXX}" 
                                               LineBreakMode="NoWrap"
                                               Style="{DynamicResource ListItemDetailTextStyle}"
                                               FontSize="13"
                                               VerticalTextAlignment="Center" />
                                    </StackLayout>

                                    ...

                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </base:BasePage.Content>
</base:BasePage>

我的文件：

Answer 1

使用如下样式，

<!-- Icons -->
        <OnPlatform x:TypeArguments="x:String"
                    x:Key="FontAwesomeBrands"
                    Android="FontAwesome5Brands.otf#Regular" />

在Xamarin Forms中使用Awesome字体有时会显示奇怪的图标

1 个答案: