Uni-App在小程序引入iconfont圖標(biāo)的解決方案（有圖有真相）

看了網(wǎng)上很多的解決方法，都不行，最后還是解決了。

絕大部分報(bào)錯(cuò)的應(yīng)該都是 路徑引入問(wèn)題，如下圖：

結(jié)果網(wǎng)上找了很多方案，都沒辦法解決（uni-app更新后應(yīng)該是幫大家解決了這個(gè)問(wèn)題）- 本文適合剛?cè)腴T uniapp 的小白 -?

1.先從iconfont網(wǎng)站上 本地下載項(xiàng)目文件

2.然后把iconfont.css 這一個(gè)css文件 拷貝到 任一文件下就行（個(gè)人建議在static下）

3.iconfont網(wǎng)站上在點(diǎn)擊生成代碼，然后點(diǎn)擊復(fù)制代碼，只需要ttf格式的地址就行 --->?src: url('//at.alicdn.com/t/font_1667580_2275ydhdx8x.ttf') format('truetype')

4.網(wǎng)上說(shuō)的需要在 //at前面 加 https 和 font-family 的 名稱 都換掉，現(xiàn)在uniapp的版本已經(jīng)不需要了，加上https就會(huì)報(bào)錯(cuò)。

5.組件中使用字體圖標(biāo)

6.最后在App.vue 的 style標(biāo)簽下 引入 我們的?iconfont.css

7.最后刷新小程序，我們的圖標(biāo)就出來(lái)了。


喜歡的 可以收藏噢 ~?

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、準(zhǔn)備工作 1、首先，進(jìn)入阿里的矢量圖標(biāo)庫(kù)，在這個(gè)圖標(biāo)庫(kù)里面可以找到很多圖片資源，當(dāng)然了需要登錄才能下載或者使用...
    你買票嗎閱讀 9,047評(píng)論 1贊 3
  • 基礎(chǔ)環(huán)境 1.使用的矢量圖標(biāo)庫(kù)：http://www.iconfont.cn/ 2.需要賬號(hào)登陸 ，名下會(huì)有對(duì)應(yīng)的...
    Dorazzz閱讀 2,066評(píng)論 0贊 0
  • 眾所周知, 小程序的有一個(gè)1M大小的限制. 而優(yōu)美的界面離不了各種圖形. 如果將這些圖形集成到小程序中. 其臃腫的...
    achar閱讀 5,509評(píng)論 0贊 10
  • 前言 記錄iconfont的三種使用方式多色圖標(biāo)出來(lái)已經(jīng)很久了，現(xiàn)在才拿出來(lái)說(shuō)貌似有點(diǎn)過(guò)時(shí)...但為了方便自己以后...
    LinDaiDai_霖呆呆閱讀 6,080評(píng)論 1贊 3
  • 1、登錄iconfont，（阿里圖標(biāo)庫(kù)），點(diǎn)開圖標(biāo)，選擇需要的圖標(biāo)，添加到庫(kù)里（點(diǎn)擊購(gòu)物車標(biāo)志）； 2、點(diǎn)擊添加至...
    Doit的謊言閱讀 1,874評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容