微信小程序使用iconfont及引入vant-icon使用ico

一、前期准备工作

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

总结：

1. 主要是vant-icon引入时，区分class和class-prefix的区别,否则不显示图标，做个记录；
2. 图标新增 / 修改 / 删除 时，一定要 点击更新代码（如下图） ，弹出的提示框直接确认， 然后再从头开始操作这篇文章
   点击更新代码