如何在Xamarin Forms的工具栏项中添加字体图标

Question

我在我的应用程序中使用导航页面。我必须为工具栏项设置字体图标，但它显示横叉符号，因为我没有设置字体族。所以有人建议我是否可以在工具栏项中设置字体图标。

- DotNetUser

---

展示代码可以让人们帮助你。 - Treewallie

https://dev59.com/44Pba4cB1Zd3GeqPyN-_?rq=1 - Treewallie

Answer 1

使用Xamarin Forms 4.x（如果我记得版本号正确）他们添加了一个FontImageSource类型，可以用于ToolbarItems。你需要做几件事情...

将字体文件添加到你的平台项目中。在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的资源文件中。

现在，如果我想将这个字体图标用作工具栏图标的imagesource，我可以按照以下方式操作：

<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（如我在上面使用的FontAwesome图标类），那么有一个很棒的工具在https://andreinitescu.github.io/IconFont2Code/，它将根据上传的字体文件生成一个C#静态类。结果看起来像这样：

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";
  ...
}

- Max Hampton

Answer 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-namespace:YourProjectName.Styles" 并且从 GitHub 添加类。

- Taras Lisniak

Answer 3

您可以尝试使用FontAwesome。首先，我们需要访问网站https://fontawesome.com/，获取Font Awesome上的矢量图标和社交媒体标志。下载字体并将其放入应用程序后，我们可以灵活地使用它。

这里有一个演示供您参考。主要代码如下：

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。

有关更多详细信息，请查看：https://medium.com/@tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

- Jessie Zhang -MSFT