1. 程式人生 > >微信小程式中使用阿里字型圖示

微信小程式中使用阿里字型圖示

在微信小程式中使用阿里字型圖示 ,不通過轉換成base64的方式實現。

為了美化微信小程式,可以適當的使用一些小圖示,這樣體驗也更友好些,於是決定使用常用的字型圖示。

下載圖示

首先在阿里字型圖示查詢你所需要的圖示,然後“新增入庫”(類似加入購物車那種)新增至專案(沒有專案選擇新建專案)查詢圖示
選擇unicode,點選“檢視線上連結”複製裡面的程式碼
檢視線上連結
點選“下載至本地”,解壓壓縮包編輯iconfont.css,將下面標註的內容替換為剛才複製的程式碼
iconfont.css

微信小程式中使用

將修改後的iconfont.css裡面的程式碼全部複製到微信小程式中需要用到的wxss檔案中,我的如下:
wxss


介面(wxml)中引用:

<text class="iconfont icon-begindate">{{begindate}}</text>//icon-begindate表示開始時間的圖示
<text class="iconfont icon-enddate">{{enddate}}</text>//icon-enddate表示結束時間的圖示

注:如何區分是哪個圖示?可以在阿里圖示“我的專案”中根據圖示文字下面的&#後面的程式碼進行區分
區分圖示