一、前期準備工作
1.進入iconfont官網(wǎng)地址添加需要的圖標，并下載到本地；
image.png
2.將解壓后的文件全部復(fù)制并放在項目的根目錄assets/iconfont文件下（項目里沒有就自己新建這兩個文件夾）；
iconfont文件解壓后的內(nèi)容
項目文件
3.引入后先復(fù)制替換掉原有的@font-face內(nèi)容，再將iconfont.css文件名改成iconfont.wxss(是因為小程序不識別.css文件)；
iconfont.wxss
（此步驟時可以精簡文件，只復(fù)制保留iconfont.wxss文件到assets/iconfont文件下，其余文件刪除，依然會正常顯示圖標）
4.項目app.wxss文件內(nèi)引入iconfont樣式；
image.png
準備工作到此已經(jīng)完成，接下來進入項目配置使用；
**普通引入方式: 微信小程序引入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組件內(nèi)容可參考VantUI官網(wǎng)快速上手進行配置；
//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
總結(jié)：
- 主要是vant-icon引入時，區(qū)分class和class-prefix的區(qū)別,否則不顯示圖標，做個記錄；
- 圖標新增 / 修改 / 刪除 時，一定要 點擊更新代碼（如下圖） ，彈出的提示框直接確認， 然后再從頭開始操作這篇文章
點擊更新代碼
