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/ 欢迎访问