Bob's Blog

MAUI构建桌面应用和移动应用时，默认图标是.net机器人，进入app时过场图像也默认是.net字样，这对于自己个人的小应用就不咋好看了，于是打算更换默认的图标，加上之前写web时用了awesome图标，这次也打算用上fontawesome。

首先更换默认的图标。

在项目根目录有个项目名的.csproj的后缀的文件，打开它，可以看到有一行是：

<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />

可以指定到非appicon.svg的svg文件，也可以替换该appicon.svg，可以把ForegroundFile这一段给去掉，就之后应用的图标就会变成新的，不会出现.net字样。

svg可以在这里搜索下载：https://www.svgrepo.com/

另外这个站点可以获取svg中各种色调并做调整：https://deeditor.com/

至于过场图像，则先找到这一行：

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

也是替换或者更换文件名，因为自己不会画图，则可以简单一点，用纯色背景加上一点居中文字，可以到这个站点自己做一个简单的：https://mediamodifier.com/svg-editor#

接着指定使用fontawesome的图标。

先到fontawesome的官网去下载一份免费的文件：https://fontawesome.com/download

下载web还是desktop随意，看需要了。

下载后解压，找到里面的ttf或者otf文件，复制到MAUI项目下Resources\Fonts文件夹下。

打开MauiProgram.cs，指定新下载的文件，addfont后三行就是对应着新加的文件：

using Microsoft.Extensions.Logging;

namespace accounting;

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("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("Font Awesome 6 Brands-Regular-400.otf", "FA-B");
                fonts.AddFont("Font Awesome 6 Free-Regular-400.otf", "FA-R");
                fonts.AddFont("Font Awesome 6 Free-Solid-900.otf", "FA-S");
            });

		builder.Logging.AddDebug();

		return builder.Build();
	}
}

接着打开这个网址，上传其中想用到的otf或ttf文件：https://andreinitescu.github.io/IconFont2Code/

它会帮我们生成一些代码，对应着图标的名字和值，用于后续调用。

接着需要新建一个c#文件，比如我的路径是在根目录下lib文件夹，新建一个fontawesome.cs, 将刚才网站转换的编码复制进去，片段为：

using System;
namespace FontAwesome
{
	public static class FAIcons
	{
        ......
        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";
        public const string _0 = "\u0030";
        public const string _1 = "\u0031";
        ......
    }
}

然后切换到需要用awesome图标的页面，比如MainPage.xaml，更改如下：
 

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:app="clr-namespace:app"
             xmlns:fontawesome="clr-namespace:FontAwesome"   //这里
             x:Class="app.MainPage">

   <ScrollView>
            ......
            <Label FontFamily="FA-S" Text="{x:Static fontawesome:FAIcons.Display}" FontSize="30" HorizontalOptions="Center"/>  //这里
            ......
    </ScrollView>

</ContentPage>

其中fontfamily就是我们在MauiProgram.cs中定义的，fontawesome:FAIcons.Display就是指定到对应图标的名字，于是在界面上能显示出来新的图标了。