一、前期准备工作
1.进入iconfont官网地址添加需要的图标，并下载到本地；
image.png
2.将解压后的文件全部复制并放在项目的根目录assets/iconfont文件下（项目里没有就自己新建这两个文件夹）；
iconfont文件解压后的内容
项目文件
3.引入后先复制替换掉原有的@font-face内容，再将iconfont.css文件名改成iconfont.wxss(是因为小程序不识别.css文件)；
iconfont.wxss
（此步骤时可以精简文件，只复制保留iconfont.wxss文件到assets/iconfont文件下，其余文件删除，依然会正常显示图标）
4.项目app.wxss文件内引入iconfont样式；
image.png
准备工作到此已经完成，接下来进入项目配置使用；
**普通引入方式: 微信小程序引入iconfont图标
可以使用view text等标签引入iconfont；
<text class="iconfont icon-suo"></text>
<view class="iconfont icon-renyuan"></view>
页面效果：
image.png
其中：
iconfont.wxss
index.wxml
**微信小程序使用van-icon引入iconfont图标；
引入VantUI组件内容可参考VantUI官网快速上手进行配置；
//index.json中注册vant-icon组件;
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"}
//index.wxml页面中使用
<van-icon class="iconfont" class-prefix="icon" name="renyuan" />
<van-icon class="iconfont" class-prefix="icon" name="suo" />
页面效果：
image.png
总结：
- 主要是vant-icon引入时，区分class和class-prefix的区别,否则不显示图标，做个记录；
- 图标新增 / 修改 / 删除 时，一定要 点击更新代码（如下图） ，弹出的提示框直接确认， 然后再从头开始操作这篇文章
点击更新代码
