在 Flutter 中使用 iconfont

在Flutter开发中，使用字体图标必不可少，虽然Flutter也给我们提供了很多内置icon，但是在实际开发中还是会使用到自定义图标。

官方图标

iconfont 对于前端开发来说并不陌生，这篇文章将演示如何在Flutter中使用 iconfont

第一步 下载

打开 iconfont 官网，登录然后创建项目，挑选合适的图标，先加入购物车，在添加到项目中，全部选择好点击下载到本地。（这步太简单就不演示了）

第二步 配置

找到下载下来的文件打开，有一个 .ttf 的文件，复制到 Flutter 项目存放静态文件夹下。
在 `pubspec.yaml` 下的 fonts:

fonts:
- family: IconFont
fonts:
- asset: assets/iconfont/iconfont.ttf

第三步 使用

 

Icon( IconData(0xe6ab, fontFamily: 'IconFont'),size: 40)

 

推荐使用方式：
由于我们项目中会使用很多图标，如果直接使用，后期不好维护，建议是将字体图标封装到一个文件里统一管理

示例：

在 util 文件夹下创建一个 icon 文件

class IconUtil {
    static const IconData male = IconData(
        0xe68d,
        fontFamily: 'IconFont' // IconFont是pubspec.yaml的命名
    );
    static const IconData female = IconData(
        0xe68b,
        fontFamily: 'IconFont'
    );
}        

使用：

/// 引入
'util/icon.dart'
/// 使用
Icon(IconUtil.male)