uni-app使用iconfont爬坑記錄

擷取iconfont

登入阿裡巴巴圖示庫,選擇需要使用的圖示,加入到購物車中

進入購物車中,選擇添加至項目.沒有項目的話自己随便建一個就行.下次從圖示管理tab下可進入我的項目頁面.

我的項目如圖:

點選下載下傳至本地

非微信小程式使用

1. 将下載下傳後的檔案加壓後找到iconfont.css檔案,拷貝至項目的uni-app頁面的style标簽中,然後複制我的項目裡面的線上連結,替換拷貝的@font-face部分,即可在頁面中使用
2. 按照上述方法将iconfont.css檔案,拷貝至項目的App.vue頁面的style标簽中,然後複制我的項目裡面的線上連結,替換拷貝的@font-face部分,即可全局使用
3. 對于font class 形式可以直接在style标簽中通過@import url("");引入

微信小程式使用

微信小程式直隻支援前兩種方法

1. 将下載下傳後的檔案加壓後找到iconfont.css檔案,拷貝至項目的uni-app頁面的style标簽中,然後複制我的項目裡面的線上連結,替換拷貝的@font-face部分,即可在頁面中使用
2. 按照上述方法将iconfont.css檔案,拷貝至項目的App.vue頁面的style标簽中,然後複制我的項目裡面的線上連結,替換拷貝的@font-face部分,即可全局使用

參考文章

内容寫的比較雜亂,存在疑惑的可以參考一下文章

1. uni-app如何引入iconfont圖示
2. 如何在微信小程式中使用iconfont
3. uni-app字型圖示使用