[.NET MAUI] FontAwesomeでアイコンフォントを使う

xamarin.formsで作成していたアプリをMAUIへとアップデートする際に、それまで使っていたXamarin.Forms Material Visualが使えなくなったので、FontAwesomeを導入しました。
備忘録として手順を残しておきます。

# 1.フォントのダウンロード
[FontAwesome](https://fontawesome.com/download)の公式サイトでフォントファイルをダウンロードします。
今回は無料のDeskTop版を使用します。
<img widht="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032663/bc8d7956-cd1a-eca4-114a-3af063f9c288.png">

# 2.フォントファイルをプロジェクトに追加
ダウンロードしたファイルの中から.otf拡張子のファイルをプロジェクトのFontsフォルダに格納し、ビルドアクションを**MauiFont**に変更。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032663/c5f0a96b-c629-57d5-3ddc-3ae30bdda836.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032663/cc60146a-ff55-3e48-c781-3669972a5e68.png">

# 3.フォントの登録
MauiProgramにフォントを登録し利用可能な状態にします。
```c#:MauiProgram.cs
using Microsoft.Extensions.Logging;

namespace sample;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				// 追加
				fonts.AddFont("Font Awesome 6 Free-Regular-400.otf", "FontAwesome-Regular");
				fonts.AddFont("Font Awesome 6 Free-Solid-900.otf", "FontAwesome-Solid");
				
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

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

		return builder.Build();
	}
}


```


# 4.リソースの登録
StaticResourceにアイコンとFontImageSourceを登録します。
使いたいアイコンの文字コードを[公式サイト](https://fontawesome.com/icons/gear?f=classic&s=solid)で調べて、今回は"f013"の歯車アイコンを追加。
```xml:App.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:sample"
             x:Class="sample.App">
    <Application.Resources>
        <ResourceDictionary>

            <!-- アイコンを追加 -->
            <x:String x:Key="SettingsIcon">&#xf013;</x:String>

            <!-- FontImageSourceを追加 -->
            <FontImageSource
                x:Key="SettingsIconImageSource"
                FontFamily="FontAwesome-Solid"
                Color="Black"
                Glyph="{StaticResource SettingsIcon}" />

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
```
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032663/95775916-42cc-ec8a-d5bc-83cdc4300b6f.png">

# 5.フォントアイコンを使用する
利用側でStaticResouceを参照。
```xml:MainPaeg.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="sample.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <!-- キーを指定してアイコンを利用 -->
            <Image Source="{StaticResource Key=SettingsIconImageSource}" />
            
            <!-- 省略 -->
</ContentPage>
```
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032663/65bb408c-8f71-26f5-a980-ddf2108b3039.png">