如何在 Flutter Web 上启用自定义图标？答案

【问题标题】：How to enable Custom Icons on Flutter Web?如何在 Flutter Web 上启用自定义图标？
【发布时间】：2022-01-03 01:51:54
【问题描述】：

我有在 IOS 和 Android 上运行良好的自定义图标。当我在 Web 上进行部署时，应用程序中应该出现我的图标的每个位置都会出现一个划掉的框。

控制台中出现的错误如下：

找不到一组 Noto 字体来显示所有缺失的字符。请为缺失的字符添加字体资源。

当我查看Flutter Design Fonts 上的文档时，我发现我已按照步骤操作。

我的自定义图标 (fishfarm.ttf) 位于 assets 文件夹中。在pubspec.yaml 我有以下内容：

  fonts:
   - family: FishFarm
     fonts:
      - asset: assets/fishfarm.ttf

我可以使用Icon(FishFarm.nombreicono)在IOS和Android中使用我的图标

如何在 Flutter Web 中使用自定义图标？

【问题讨论】：

【解决方案1】：

快速解决方法是使用html 渲染器构建您的网络应用程序。

构建

flutter build web --web-renderer html

或运行

flutter run -d chrome --web-renderer html

但它可能会在 PC 浏览器上表现不佳，因为 Flutter Web 在 PC 浏览器上使用 canvaskit 渲染器以获得更好的性能，而在移动浏览器上使用 html 渲染器。

【讨论】：