第八十六回：自定义字体图标

我们在上一章回中字体图标相关的内容，本章回中将介绍 如何自定义字体图标.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中说的自定义字体图标本质上是对字体图标进行封装，让它的使用方式和系统SDK中字体图标的使用方式完全一样。因此，本章回内容可以看作是对上一章回内容的扩展延伸。下面我们将介绍自定义图标的详细步骤。

实现方法

1. 自定义一个字体图标类，通过该类来封装字体图标；
2. 在类中通过静态常量成员封装字体图标，成员的类型是IconData；
3. 在Icon组件中直接使用类中静态常量成员，这和系统SDK中的使用方式完全一致；

示例代码

///自定义图标类，方便在代码中直接使用
class CustomIcon {
  static const IconData char_e = const IconData(0x13ec, fontFamily: 'IconMoon', matchTextDirection: true,);
  static const IconData char_count = const IconData(0x2211, fontFamily: 'IconMoon', matchTextDirection: true,);
  static const IconData num_16 = const IconData(0x024f0, fontFamily: 'IconMoon', matchTextDirection: true,);
  static const IconData shap_3 = const IconData(0x2206, fontFamily: 'IconMoon', matchTextDirection: true,);
}
///使用自定义类中的字体图标，还可以修改图标和大小和颜色
Icon(CustomIcon.char_count,size: 40,color: Colors.purpleAccent,),

上面代码中只封装四个字体图标，其实文件中还有很多的字体图标，大家可以自己去封装。此外，我们还可以通过Iocn提供的属性来修改字体图标的大小和颜色。

编译并且运行上面的代码可以看到自定义字体图标中的数字，大家可以自己切换不同的字体图标，亲自体验一下自定义字体图标的过程。

相关推荐

在最后我们推荐一些好的字体图标，点击这里查看网站，该网站提供了很多开源的字体图标，不过在使用时需要遵守SIL开源协议。

选择某一类字体图标后可以下载到本地使用，字体图标的文件是ttf格式，它的使用方法我们在上一章回中介绍过了。该网站最大的优点是提供了自定义类，并且在类中封装了字体图标，类中静态常量成员的名字简洁明了，而且与ttf文件中的字体相匹配，我们可以代码中直接拿来使用。

Flttter社区也提供了好用的字体图标，他们把字体图标封装成了三方包，包名是：font_awesome_flutter。我们可以在yaml配置文件中导入该包，然后像使用系统SKD提供的字体图标一样去使用该包中的字体图标。包中图标的样式可以到官方网站中查看。

看官们，关于"自定义字体图标"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!