1. 程式人生 > >微信小程式開發-引入阿里巴巴向量icon圖示庫

微信小程式開發-引入阿里巴巴向量icon圖示庫

先在阿里巴巴圖示庫下載icon圖示並儲存到專案裡,然後下載到本地。此步驟的壓縮檔案命名為壓縮1檔案。

解壓下載檔案,開啟轉換網址https://transfonter.org/,點選 Add fonts按鈕將iconfont.ttf檔案上傳上去,按圖操作就好。此步驟的壓縮檔案命名為壓縮2檔案。

解壓下載後的檔案,將檔案內容複製,貼上到壓縮1檔案裡面的iconfont.css裡面,覆蓋其@font-face部分,應該能一眼就看出來。

在css的.iconfont裡面將font-size:16px;改成

font-size:inherit;
繼承父級字型尺寸。

接著將整個檔案內容複製到app.wxss裡面
引用方式為:

<text class="iconfont icon-圖示名"></text>
icon-圖示名可以在複製過來的內容裡面找到

其實就是這個

另外還要將壓縮1檔案裡面的其他幾個檔案也要放在app.wxss同一個目錄下,附上目錄圖:

PS:推薦將轉換後的ttf檔案改成一個wxss檔案,然後將其引入到app.wxss裡