在Flutter 中使用 IconFont

---

IconFont官网地址：https://www.iconfont.cn

---

下载IconFont图标到本地

下载成功后解压， 把解压后目录里的.ttf格式的文件复制到项目中

编辑pubspec.yaml文件

...

flutter:
  fonts:
  	# 这里是iconfont的class名
   - family: IconFontIcons
     fonts:
     	# 这里是iconfont.ttf所在的路径
       - asset: assets/fonts/iconfont.ttf

...

使用方式

Icon(
  IconData(0xe624, fontFamily: 'IconFont'),
  size: 20,
  color: Colors.black
)

进阶

由于后期一旦图标多了，直接使用的方式容易导致不知道图标是哪个，所以自定义Icon类管理项目中所有的图标

创建IconFont.dart文件，存放IconFont类

import 'package:flutter/widgets.dart';

class IconFontIcons {
  static const IconData iconMoon =
      IconData(0xe654, fontFamily: 'IconFontIcons');
  static const IconData iconPriceTag =
      IconData(0xe656, fontFamily: 'IconFontIcons');
  static const IconData iconZuobiao =
      IconData(0xe655, fontFamily: 'IconFontIcons');
  // ...
}

使用方式

Icon(
  IconFontIcons.iconMoon,
  size: 20,
  color: Colors.black,
)

如果项目中引用字体图标比较多，自己手动一个个的加又比较麻烦，可以使用下面提供的方式一键生成IconFont类

复制下面的代码

javascript:function download(filename,text){var element=document.createElement('a');element.setAttribute('href','data:text/plain;charset=utf-8,'+encodeURIComponent(text));element.setAttribute('download',filename);element.style.display='none';document.body.appendChild(element);element.click();document.body.removeChild(element)}function toHump(name){name=name.replace(/\s+/g,"-");return name.replace(/\-(\w)/g,function(all,letter){return letter.toUpperCase()})}function getFlutterClass(){var str="import 'package:flutter/widgets.dart';\r\n\r\n";str+="class IconFontIcons {\r\n";var arr=document.querySelectorAll(".icon-item");for(var i=arr.length-1;i>=0;i--){var item=arr[i];var item_name=toHump(item.querySelectorAll(".icon-code")[1].textContent);var item_code=item.querySelectorAll(".icon-code")[0].textContent.replace(/\&\#/g,"0");item_code=item_code.replace(/\;/g,"");str+="    static const IconData "+item_name+" = IconData("+item_code+",fontFamily:'IconFontIcons');";str+="\r\n"}str+="}";return str}download("IconFontIcons.dart",getFlutterClass());

在Chrome的书签栏右键单击，选择添加网页

粘贴刚刚复制的代码，并设置一个名称

然后进入到iconfont的官网,点击刚刚添加的标签， 就会自动下载一个iconfont.dart的类了，然后把这个文件复制到项目中就可以使用了

---

个人博客：https://www.linmeimei.top/ 欢迎访问

---