如何在 Flutter 中使用 IconFont ?

我的个人博客同步更新，阅读体验会好一点，欢迎访问。

简书：https://www.jianshu.com/u/762002465748

掘金：https://juejin.im/user/5a3127da5188251c11409f0a

个人博客：https://wuht.coding.me/

废话

距离上一次更新博客已经半年了，实在是有点忙，期间还换了了个工作，很多的事情，但是非常感谢有的网友还跟我联系，自己写的东西还有人觉得有价值，这感觉挺好的。

2018-06-09_190733.png

正文

2018年2月世界移动大会Google发布了 Flutter beat1，现在 Flutter 已经更新到v0.5.2 了，是时候学习一波了。~~主要是最近在搞 Weex 被坑的不行了。~~

Iconfont 的使用自己去看一下文档了，我就不说了。

目前在 Flutter 中使用图标的几种方式

内置图标

目前在 Flutter 使用图标的话，可以使用 Icons ：

  icon: Icon( Icons.home)

内置图标还是挺多的，基本上还是够用的。

fontawesome

除了Icons，还有国外比较流行了 fontawesome 可以使用，已经有人做了个包了，依赖一下font_awesome_flutter这个包，使用也比较简单：

  icon: new Icon(FontAwesomeIcons.gamepad),

使用图片

这个主要就是配置一下 pubspec.yaml里的assets，使用的话跟图片一样，缺点就是大小和颜色不太好控制，而且会增加项目的体积。

iconfont

国内用的多，但是还没有人做 Flutter 的package，所以只能自己搞一下了。

教程开始了

从iconfont网站上下载ttf文件

2018-06-09_184200.png

放到某个目录下，比如说 fonts 文件夹下:

project/
  lib/
    ...
  fonts/
    iconfont.ttf
  pubspec.yaml

配置 pubspec.yaml 下的 fonts:

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

然后就可以使用了

Icon( IconData(0xe6bb, fontFamily: 'iconfont'),color: Colors.blue,size: 89.0)

0xe6bb 这个十六进制是从这里拿到的：

2018-06-09_185052.png

不同的十六进制代表不同的图标。

本来教程到这里就结束了，但在实际做的过程中我是有一个疑问的，就是为啥下面的代码不可以正常显示图标，而且字符 x，会被转换成一个键盘的图标，这个问题之前在vue使用v-text设置iconfont图标就会出现，但是一直不知道为啥，希望有大佬能评论区解答一下。

Text("#0xe7b7;",style: TextStyle(fontFamily: 'iconfont'))// 可以正常换字体，但图标不行

欢迎打赏，关注，点赞。

最后编辑于：2018.06.09 19:12:55