在 Xamarin AppShell TabBar 图标属性中使用 FontAwesome 或任何其他网络字体

如何解决在 Xamarin AppShell TabBar 图标属性中使用 FontAwesome 或任何其他网络字体

我在 Xamarin.Forms(5.0) 应用程序中设置了 FontAwesome（我使用的是来自 Microsoft 的底部选项卡模板）。

我可以在其中一个页面的图像中显示图标，没有任何问题。我似乎无法在 TabBar 元素中显示字体图标之一。

在模板中有两个导航元素； “关于”和“浏览”。这些引用的图标似乎是添加到特定 iOS 和 Android 项目中的 .png 文件。我想改为引用 webfont 图标。

这是我的 AppShell.xaml 代码。任何人都可以看出这有什么问题吗？您在下面看到的所有代码都是模板生成的，除了 local2 命名空间声明和“显示”ShellContent 项。

FontAwesomeBrands 只是一个使用 IconFont2Code 网站从 .otf 文件生成的类。

    <?xml version="1.0" encoding="UTF-8"?>
    <Shell xmlns="http://xamarin.com/schemas/2014/forms" 
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:local="clr-namespace:Business.Mobile.Views"
           xmlns:local2="clr-namespace:Business.Mobile"
           Title="Business.Mobile"
           x:Class="Business.Mobile.AppShell">
    
        <Shell.Resources>
            <ResourceDictionary>
                <Style x:Key="BaseStyle" targettype="Element">
                    <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                    <Setter Property="Shell.ForegroundColor" Value="White" />
                    <Setter Property="Shell.TitleColor" Value="White" />
                    <Setter Property="Shell.disabledColor" Value="#B4FFFFFF" />
                    <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                    <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                    <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                    <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                    <Setter Property="Shell.TabBarTitleColor" Value="White"/>
                </Style>
                <Style targettype="TabBar" BasedOn="{StaticResource BaseStyle}" />
                <Style targettype="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
            </ResourceDictionary>
        </Shell.Resources>
    
        <TabBar>
            <ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
            <ShellContent Title="browse" Icon="icon_Feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent Title="Shows" Icon="{x:Static local2:FontAwesomeBrands.Audible}"  ContentTemplate="{DataTemplate local:ItemsPage}" />
        </TabBar>
    
        <!--
            If you would like to navigate to this content you can do so by calling
            await Shell.Current.GoToAsync("//LoginPage");
        -->
        <TabBar>
            <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
        </TabBar>
    
    </Shell>

这是在我的 AssemblyInfo.cs 文件中。

    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    [assembly: XamlCompilation(XamlCompilationoptions.Compile)]
    [assembly: ExportFont("fa-brands-400.otf",Alias = "FaBrands")]

一切都在共享项目的根目录中。 fa-brands-400.otf 文件的属性设置为 EmbeddedResource。同样，它正在处理我添加到 AboutPage.xaml 的图像。

解决方法

您需要指定您正在使用 FontImageSource 才能指定 Glyph 和 FontFamily 属性，否则默认情况下它将通过您指定的字符串查找本地图像。

<TabBar>
    <ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent Title="Browse" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />

  <ShellContent Title="Shows">
      <ShellContent.Icon>
           <FontImageSource FontFamily="FaBrands"
                            Glyph="{x:Static local2:FontAwesomeBrands.Audible}"/>
      </ShellContent.Icon>
 </ShellContent.Icon>
</TabBar>