如何在 xamarin 表单的工具栏项中添加字体图标答案

【问题标题】：How to add font icon in toolbar item in xamarin forms如何在 xamarin 表单的工具栏项中添加字体图标
【发布时间】：2021-01-15 16:00:59
【问题描述】：

我在我的应用程序中使用了导航页面。我必须将字体图标设置为工具栏项。但它显示十字符号，因为我没有设置字体系列。所以任何人都建议我在工具栏项中设置字体图标是可能的。

【问题讨论】：

显示代码将允许人们帮助您。
stackoverflow.com/questions/26132500/…

标签： xamarin.forms android-toolbar

【解决方案1】：

使用 Xamarin Forms 4.x（如果我没记错的话）他们添加了可以在 ToolbarItems 上使用的 FontImageSource 类型。您需要做的一些事情...

将字体文件添加到您的平台项目。在 Android 上，将它们添加到 Assets 文件夹中，并将构建操作设置为 AndroidAsset。在 iOS 上，将它们添加到 Resources 文件夹中，并将构建操作设置为 BundleResource。同样在 iOS 上，编辑您的 info.plist 并添加

<key>UIAppFonts</key>
<array>
    <string>fontname.ttf</string>
    <string>fontname2.ttf</string>
    ...
</array>

现在 Xamarin 可以使用这些字体了。

我定义了一些应用程序资源来轻松加载字体：

<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
  <On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
  <On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
  <On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>

位于合并到 App.xaml 资源中的资源字典中。

现在，当我想使用字体图标作为工具栏图标图像源时，我可以执行以下操作：

<Page.ToolbarItems>
  <ToolbarItem Command="{Binding SomeCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
        Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
        Size="{StaticResource ToolbarIconImageSourceSize}" />
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</Page.ToolbarItems>

如果您想要一个静态类来定义字形图标而不是必须输入 unicode（我在上面的字形中使用的 FontAwesomeIcon 类），https://andreinitescu.github.io/IconFont2Code/ 有一个很棒的工具，它将生成一个基于上传的字体文件。它最终看起来像

public static class FontAwesomeIcon
{
  public const string Abacus = "\uf640";
  public const string Ad = "\uf641";
  public const string AddressBook = "\uf2b9";
  public const string AddressCard = "\uf2bb";
  public const string Adjust = "\uf042";
  public const string AirFreshener = "\uf5d0";
  ...
}

【讨论】：

【解决方案2】：

<ContentPage.ToolbarItems>
    <ToolbarItem Order="Primary" Command="{Binding ExportDocumentCommand}">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Size="Subtitle" 
                Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</ContentPage.ToolbarItems>

在 app.xaml 中

<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
    <On Platform="iOS" Value="FontAwesome5Free-Solid" />
    <On Platform="Android" Value="Fonts/FontAwesome5Solid.otf#Regular" />
    <On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>

为了工作这一行 "Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}"" 您需要在页面上添加
xmlns:fontawesome="clr-命名空间:YourProjectName.Styles" 并从GitHub添加类

【讨论】：

【解决方案3】：

您可以尝试使用FontAwesome 首先，我们需要访问网站：https://fontawesome.com/，使用 Font Awesome 获取网站上的矢量图标和社交标志。我们下载好字体放到我们的app里后，就可以灵活使用了。

这是一个演示，您可以查看它。主要代码如下：

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"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="MyFontApp.App">
<Application.Resources>
    <ResourceDictionary>
        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeBrands">
            <On Platform="Android" 
      Value="FontAwesome5Brands.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Brands-Regular" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
        </OnPlatform>

        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeSolid">
            <On Platform="Android" 
      Value="FontAwesome5Solid.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Free-Solid" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
        </OnPlatform>

        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeRegular">
            <On Platform="Android" 
      Value="FontAwesome5Regular.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Free-Regular" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
        </OnPlatform>
    </ResourceDictionary>
  </Application.Resources>

班级FontAwesomeIcons

 namespace MyFontApp.Utils
 {
    public static partial class FontAwesomeIcons
    {
        public const string FiveHundredPX = "\uf26e";

        public const string Abacus = "\uf640";

        public const string AccessibleIcon = "\uf368";

        // other font icon codes
   }
   }

我们这样使用：

    <NavigationPage.TitleView  >
    <StackLayout Orientation="Horizontal"  HorizontalOptions="CenterAndExpand">
        <Label   Text="{x:Static Utils:FontAwesomeIcons.Map}"
                 FontFamily="{StaticResource FontAwesomeSolid}"/>

        <Button   Text="{x:Static Utils:FontAwesomeIcons.Anchor}"
                 FontFamily="{StaticResource FontAwesomeSolid}"/>
    </StackLayout>

</NavigationPage.TitleView>

结果是：

您可以查看完整的演示 here。

【讨论】：