Font Awesome 中的 Shell FlyoutItem 图标

Question

我正在尝试使用 FontAwesome 图标作为FlyoutItem图标FontImageSource。我通过以下设置在 Xamarin Forms 中取得了成功，但由于某种原因在 NET MAUI 中它不起作用（至少在 Windows 上？）？我看到选项卡项目，但无论我尝试什么，都没有图标。有没有办法使用 Font Awesome 图标而不是 png 图片？

我尝试使用的图标示例：https://fontawesome.com/icons/user?s =solid&f=classic

MauiProgram.cs：

var builder = MauiApp.CreateBuilder();
builder
  .UseSkiaSharp(true)
  .UseMauiApp<App>()
  .ConfigureFonts(fonts =>
  {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    fonts.AddFont("FW-Regular-400.otf", "FontAwesomeRegular");
    fonts.AddFont("FWBrands-Regular-400.otf", "FontAwesomeBrands");
    fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
  });

应用程序.xaml：

  <!-- Desktop/Tablet-->
  <FlyoutItem Title="Home">
    <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="&#xf021;"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>
  <FlyoutItem Title="Settings">
    <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="user"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>

Answer 1

我已经得到了下面提到的工作方式。然而目前看来该解决方案在 NET7 中有效，但在 NET6 中无效。在 NET6 中没有可见的图标：

对于.NET 7

应用程序.xaml：

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyTool"
             xmlns:page="clr-namespace:MyTool.Pages"
             xmlns:helpers="clr-namespace:MyTool.Helpers"
             x:Class="MyTool.App">

  <Application.MainPage>
    <Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">

      <!-- Desktop/Tablet-->
      <FlyoutItem Title="Home" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.House}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.House}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
      <FlyoutItem Title="Settings" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.Gear}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Gear}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
    </Shell>
  </Application.MainPage>
</Application>

FontAwesomeIcons.cs：（ 使用互联网上可用的一些工具来生成此类）

namespace MyTool.Helpers
{
    public static class FontAwesomeIcons
    {
      public const string Space = "\u0020";
      public const string Exclamation = "\u0021";
      public const string Hashtag = "\u0023";
      public const string DollarSign = "\u0024";
      public const string Percent = "\u0025";
      public const string Asterisk = "\u002a";
      public const string Plus = "\u002b";
      public const string Hyphen = "\u002d";

      // etc
    }
 }

MauiProgram.cs：

namespace MyTool;

public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureFonts(fonts =>
      {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
      });

#if DEBUG
    builder.Logging.AddDebug();
#endif

    return builder.Build();
  }
}