flutter 引入自定义iconfont

Posted on 2022-05-29  333 Views


如何引入?

1、首先登录阿里巴巴矢量图标库,找到你想要的icon,然后鼠标悬浮到icon上并点击购物车

2、点击右上角购物车

3、点击添加到项目

4、在项目中再点击下载到本地

5、下载后把.ttf文件移动到你的项目根目录里(哪个文件夹都行)

6、打开flutter项目,再pubspec.yaml里导入,注意库名必须要和文件名相同否则会出现方块!

fonts:
    - family: omniscienceIcons //库名
      fonts:
        - asset: lib/assets/fonts/iconfont.ttf //文件地址

7、新建一个库类,或者直接使用即可,用法如下:

Unicode码
class myIcons { //用的时候直接myIcons.starFull或者直接上IconData()
  static const IconData starFull = IconData(
      0xe8c6, //Unicode码,把&#换成0
      fontFamily: "omniscienceIcons", //库名
      matchTextDirection: true
  );

谢谢你能看完呀~~~