Использование Font Awesome в Xamarin Forms иногда показывает странные значки - PullRequest
Новая
       33

Использование Font Awesome в Xamarin Forms иногда показывает странные значки

0 голосов
/ 10 июня 2019

Я использовал следующий учебник для использования значков шрифтов в своем проекте форм xamarin: https://medium.com/@tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

Я использую xamarin формы 4 и шрифт потрясающие иконки 5. На самом деле тестируется только на Android.

Иногда отображается значок, а иногда просто квадрат с косой чертой или азиатский символ. Это странно, потому что когда у меня есть список и для каждого элемента, который я хочу показать, символ будет отображаться правильно для первого элемента, но не для всех остальных на той же странице!

Что с ним не так?

Пример, как это выглядит:

enter image description here

Вы можете видеть, что отображаются первые значки в списке, но все остальные нет, и это просто шаблон данных в ListView ..

Мой код:

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>

Мои файлы:

enter image description here

1 Ответ

0 голосов
/ 11 июня 2019

Используйте стили, как показано ниже, 

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