第八十五回：如何使用字体图标

我们在上一章回中介绍了Icon这种Widget，本章回中将介绍 如何使用字体图标。闲话休提，让我们一起Talk Flutter吧。

概念介绍

本章回中介绍的字体图标是指Icon中使用特殊的字体来充当图标，字体图标可以看作是上一章回中Icon的扩展。其实SDK中提供的Material Icons也是字体图标，只不过系统SDK对这些图标进行了封装，以方便开发人员使用。

使用方法

1. 创建矢量图标，通常是ttf格式，或者从网络下载其他人员创建作的开源图标；
2. 把下载的ttf文件放到到项目中并且在yaml文件配置与图标的相关内容;
3. 在代码中把ttf文件中的字体封装成IconData类型的图标对象，
4. 在Icon组件中使用刚才创建的IconData图标对象；

我在网络上免费下载了ttf字体图标： 大家可以到该网站下载，国内常用的是阿里巴巴矢量图标。其实Gihub上也有一些开源的矢量图标可以下载使用，大家自行查找，我在这里就不介绍了。

下载的字体图标文件最好放在projectName/fonts或者projectName/assets/fonts目录下，这样方便项目管理。这两个目录在项目中不存在，需要自己创建。

示例代码

flutter:
  generate: true # Add this line

 uses-material-design: true

  assets:
    - images/ex.png
    - images/panda.jpeg

  #在这里添加字体图标相关的内容
  fonts:
    - family: IconMoon
      fonts:
        - asset: fonts/IcoMoonFree.ttf

上面代码中最外层的fonts是标签，它和图片标签assets位于一同级.family可以看作是字符图标的包名，asset后面的内容是字符图标文件所在的路径。

///使用SDK中系统提供的图标
  Icon(Icons.add),
///使用网络下载的ttf格式的字体图标，通过IconData使用ttf文件中的图标
  Icon(IconData(0x2211,fontFamily:'IconMoon' )),

上面代码中的0x2211是十六进制的内容，可以把它当作ttf文件中某个字体图标的标识，我们使用文本编译器打开ttf文件就会看作这些标识，大家可以替换成文件中其它的标识。

fontFamily属性的值就是我们在yaml文件中配置的值。

我们在代码中分别使用了系统SDK提供的图标和自己在网络上下载的字体图标，从代码中可以看出，系统SDK提供的图标更加简洁明了。其实SDK的提供的字体图标和我们下载的字体图标在原理上完全相同，只是SDK对图标进行了封装，以方便开发者使用，大家看一下源代码就能明白，就看代码中Icon.add这个字体图标就可以，SDK使用静态变量进行了封装。我们在下一章回中将专门介绍这部分内容。

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