下载字体资源文件
下载网上ttf文件和对应的css文件，这里以阿里巴巴图标库使用为例。下载资源文件下载，解压缩目录结构：
demo.css
demo_index.html
iconfont.css
iconfont.eot
iconfont.js
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.woff2
将上面iconfont.css文件转换成dart可使用类型
这里推荐一个工具：iconfont 转 Flutter IconData，将iconfont.css拖拽进去生成一下文件内容：
// iconfont.dart 文件内容
library iconfont; // 新添加内容，包名[1]
import 'package:flutter/widgets.dart';
class IconFont {
static const String _family = 'iconfont';
IconFont._();
static const IconData icon_message = IconData(0xe610, fontFamily: _family);
static const IconData icon_message1 = IconData(0xe608, fontFamily: _family);
static const IconData icon_qunliao = IconData(0xe614, fontFamily: _family);
...
}
建立iconfont目录文件结构
在项目中lib文件夹下新建iconfont文件夹
- iconfont
- fonts
- iconfont.ttf // 将上述 iconfont.ttf 文件复制进去
- lib
- iconfont.dart // 新建文件，将上述中的 iconfont.dart 复制进来
- pubspec.yaml // 新建文件
pubspec.yaml
name: iconfont
description: The font for my application
version: 1.0.0
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter:
fonts:
- family: Iconfont
fonts:
- asset: fonts/iconfont.ttf
引用和使用
-
引入： 修改【例如: wx_demo】项目中pubspec.yaml
...
dependencies:
flutter:
sdk: flutter
...
iconfont:
path: lib/iconfont/ # 在这里引入第三方icon库
...
...
-
使用
import 'package:iconfont/iconfont.dart';
Icon icon = Icon(IconFont.icon_message2) // 注意：这里的`IconFont`要和`iconfont.dart`中类名一致。
结尾文件目录参考
wx_demo目录结构
wx_demo/lib/iconfont目录结构
参考：https://segmentfault.com/a/1190000017978633
依赖未发布的 package
