技術標籤：微信小程式小程式

在微信小程式內如何使用iconfont圖示文字：

1.下載具體的圖示的程式碼
2.小程式內使用css程式碼
3.wxml引用節點

下載具體的圖示的程式碼

1.在iconfont網站搜尋需要的圖示，加入到購物車

購物車

2.下載具體程式碼

開啟購物車，直接點選 ‘下載程式碼’即可，開啟下載的程式碼，使用裡面的iconfont.css，複製其css程式碼到微信小程式內。

小程式內使用圖示

1.複製的css可以直接放到具體的頁面的xxx.wxss檔案中

注意⚠️：這樣只能單個頁面使用，不建議這麼做

2.放到公用圖示檔案，新增公用的wxss檔案，這樣所有頁面都可以使用

如：在static/css下新建iconfont.wxss,把所有的iconfont的css程式碼都放這裡

在app.wxss全域性樣式檔案內引用，即為全域性的圖示樣式

/**app.wxss**/
@import './static/css/weui.wxss';
@import './static/css/iconfont.wxss';

注意⚠️：iconfont的css的程式碼可以一個個下載，也可以一次性加入到購物車然後再下載。根據需要時再加的程式碼要注意content的值不要有重複，不然會導致前一個失效！！

類名可以自己修改，會起衝突的是content的值"\e622"; 注意避免

.icon-wode:before {
  content: "\e622";
}

在wxml使用

<icon class='iconfont icon-wode'></icon>