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

Question

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

我可以毫无问题地在其中一个页面上的图像中显示图标。我似乎无法在 TabBar 元素中显示其中一种字体图标。

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

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

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

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

的图像

Answer 1

您需要指定您正在使用 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>

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

Using FontAwesome or any other webfonts in the Xamarin AppShell TabBar Icon Property

xaml

xamarin

xamarin.forms

font-awesome

xamarin.forms.shell

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

Using FontAwesome or any other webfonts in the Xamarin AppShell TabBar Icon Property

xaml

xamarin

xamarin.forms

font-awesome

xamarin.forms.shell

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