---

本文翻译自：font_awesome_flutter | Flutter Package (flutter-io.cn)

译时版本：

---

font_awesome_flutter 

用于 Flutter 免费的 Font Awesome 图标集 - 基于font awesome 6.2.1 版本。

该图标集只包含 Font Awesome 提供的 免费 图标，开箱可用。 如果已经购买了专业版图标并想使其可用的话，查看下面的说明。

安装

在 pubspec.yaml 的 dependencies: 部分，添加下面的内容：

dependencies:
  font_awesome_flutter: <latest_version>

用法

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // 使用 FaIcon 组件 和 FontAwesomeIcons 类作为 IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

图标名称

图标名称和官网的名称相同，但是是小驼峰写法。 如果一个图标有多个图标样式 ，样式名会用作前缀，除了 "regular" （常规样式）。 因为 Dart 中的限制，以数字开始的图标会用它们的单词写出来。

示例：

图标名称	代码	样式
angle-double-up	FontAwesomeIcons.angleDoubleUp	solid  (该图标没有其它免费的 style)
arrow-alt-circle-up	FontAwesomeIcons.arrowAltCircleUp	regular
arrow-alt-circle-up	FontAwesomeIcons.solidArrowAltCircleUp	solid
1	FontAwesomeIcons.solidOne	solid

示例应用

查看 example 的 Flutter应用，能看到所有可用的 FontAwesomeIcons。

自定义 font awesome flutter

这里提供了一个配置工具来帮助进行对该包的常用定制。 所有选项都是可互操作的。 默认情况下，如果 lib/fonts 下没有 icons.json ，运行也不带参数，它会把所有图标更新为 font awesome 最新的免费版本。

准备

要使用自定义版本，首先需要克隆 这个仓库 来定位你的选择，然后在里面运行 flutter pub get 。这会安装所有的依赖。

配置器位于 util 目录中，在 Windows 上可运行 configurator.bat 启动，在 Linux 或 Mac 上可运行 ./configurator.sh 启动。\

下面所有的示例都使用 .sh ，和 .bat 是一样的。(如果是在 windows 上，省略 ./ 或替换为 . 。）运行 ./configurator.sh --help 可查看可用选项的概览。

要在应用中使用自定义的版本，在 pubspec.yaml 中添加依赖 font_awesome_flutter: '>= 4.7.0' 。然后覆写依赖的位置。

dependencies:
  font_awesome_flutter: '>= 4.7.0'
  ...
  
dependency_overrides:
  font_awesome_flutter:
    path: path/to/your/font_awesome_flutter
  ...

使用专业版图标

❗ 导入专业版图标，你要认识到有义务保持其私有。 这包括 不 升级你的包到公共的 git 仓库或其它公共的文件共享服务中。

• 进入到自定义 font_awesome_flutter 版本的位置 (查看 准备)
• 下载 font awesome 专业版的 Web 版本，然后打开。
• 移动 所有的  webfonts 目录下的 .ttf 文件和 metadata 下的 icons.json 到 path/to/your/font_awesome_flutter/lib/fonts 中。替换掉现有的文件。
• 运行配置器。它会告诉你 "Custom icons.json found" （找到自定义的 icons.json）。

要在应用中看到改变后的效果，可能需要运行 flutter clean 。

排除样式

可以在所有的生成过程中传递 --exclude 选项排除一个或多个样式：

$ ./configurator.sh --exclude solid
$ ./configurator.sh --exclude solid,brands

查看 优化 和 用名称动态获取图标 部分看一下为何会对应用有意义的更多信息。

用名称或 CSS 类动态获取图标

可能在支持专业版图标后最多被问到的特性就是用名称获取图标的能力。

之前这是不可能的，因为从名称到图标的映射会打破所有 讨论过的优化。 现在仍然也要意识到这一点。 因为理论上所有的图标都能被请求，而且 Flutter 不会移除任何一个。 强烈建议只在结合 有限样式集合 使用该选项，并且尽量少使用它们。 可能需要指定 --no-tree-shake-icons 标志编译应用，使其可用。

使用这个新的配置器工具，现在还有一个可选的特性。 运行工具时指定 --dynamic 标志来生成。。。

$ ./configurator.sh --dynamic

。。。然后下面的 import 来使用 Map 。对于一般图标，使用带 'style icon-name' 格式 key 的faIconMapping 。

import 'package:font_awesome_flutter/name_icon_mapping.dart';

...
    FaIcon(
      icon: faIconMapping['solid abacus'],
    );
...

要排除绑定配置器选项时未使用的样式：

$ ./configurator.sh --dynamic --exclude solid

一个通常的使用场景也包含从服务器获取 CSS 类。 工具函数 getIconFromCss() 有一个 CSS类 的字符串参数，返回可被浏览器显示的图标：

getIconFromCss('far custom-class fa-abacus'); // 返回常规样式的算盘图标。 custom-class 被忽略了。

双色版图标

font awesome 改变了图标字形在字体文件内部的布局方式后，双色版的支持就中断了。 现在 Flutter 不支持使用联结的新方式。

关于双色版中断支持的更多信息，查看 这个帖子。

常见问题

为什么图标没有正确对齐 或 为什么图标被切掉了？

请使用该库提供的 FaIcon 组件代替 Flutter 的 Icon 组件。 Icon 组件会假定所有的图标都是正方形的，但很多 Font Awesome 图标不是。

关于文件大小和 RAM 使用

该包的实现方式是它只使用最少的必需资源。

所有未使用图标的链接 (例， FontAwesomeIcons.abacus) 会被自动移除，这意味着只有需要的图标定义会被加载到 RAM 中。

Flutter 1.22 添加了图标树抖动。 这意味着未使用的图标 "images" 也会被移除。

尽管这样，至少有一个图标的样式会被使用。 假设只有图标的 "regular" 样式被使用了，会最少只包含图标 "regular" 的样式，"solid" 和 "brands" 会仍然以完整的形式保留在它们的原始文件中。该 issue 是 flutter 仓库里的追踪。

尽管这样，使用配置器，可以很容易地从包中排除样式。更多信息，查看 自定义 font awesome flutter

为什么图标在移动设备上显示不出来？

如果看不到任何图标，有时候这意味着在 Flutter 有一个应用的缓存版本在设备上，并没有推送新的字体。我也碰到过几次这种情况。。。

请尝试：

1. 停止应用
2. 在应用的目录下运行 flutter clean
3. 从模拟器 虚拟机 设备上删除应用
4. 重新编译部署应用。

为什么这些图标在 Web 中显示不出来？

很可能因为，字体没有正确地添加到 FontManifest.json 。 注意：Flutter 的旧版本在编译阶段不能正常打包 FontManifest.json 的非 Material 字体， 但是该 issue 已经解决了，现在应该不是问题了。

请确认是在使用 Flutter 1.14.6 beta 或更新版本！

为什么 mac/linux 无法运行这个配置器？

这很可能是由于没有权限。下载下来的脚本默认无法运行。

用 $ chmod +x configurator.sh 赋予 util/configurator.sh 的运行权限，或者在命令前先运行下面的 sh：

$ sh ./configurator.sh

---