uni圖標(biāo)在app上不顯示的解決辦法：1、不要使用非H5端不支持的vue語(yǔ)法；2、在組件內(nèi)部寫(xiě)樣式；3、修改路徑“url(https://alicdn.net)”；4、用手機(jī)可訪問(wèn)的IP進(jìn)行聯(lián)網(wǎng)測(cè)試。

本文操作環(huán)境：Windows7系統(tǒng)、uni-app2.5.1版，DELL G3電腦

uni圖標(biāo)在app上不顯示？

uniapp引入iconfont圖標(biāo)及解決真機(jī)中iconfont不顯示的問(wèn)題

一、uniapp中如何引入iconfont圖標(biāo)

1、先從iconfont網(wǎng)站下載項(xiàng)目文件。如圖：

2、下載好的iconfont文件解壓，取iconfont.css放入自己工程目錄

3、回到iconfont網(wǎng)站，點(diǎn)擊復(fù)制代碼，只需要ttf格式的地址就行

4、打開(kāi)項(xiàng)目中的iconfont.css文件，用復(fù)制的ttf格式的代碼寫(xiě)進(jìn)@font-face中，如下：

@font-face { 　　font-family: "iconfont"; 　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype'); }

5、最后在App.vue 的 style標(biāo)簽中引入iconfont.css

6、重新編譯，可以看到應(yīng)的圖標(biāo)。

二、解決真機(jī)中iconfont不顯示的問(wèn)題

　　問(wèn)題：經(jīng)過(guò)如上操作，iconfont圖標(biāo)在H5里是正常顯示了，但是當(dāng)在真機(jī)app上調(diào)試時(shí)卻發(fā)現(xiàn)icon顯示不成功。

　　解決方案：官方鏈接：https://uniapp.dcloud.io/matter

1、使用了非H5端不支持的vue語(yǔ)法，受小程序自定義組件限制的寫(xiě)法，詳見(jiàn)

2、不要在引用組件的地方在組件屬性上直接寫(xiě) style="xx"，要在組件內(nèi)部寫(xiě)樣式

3、url(//alicdn.net)等路徑，改為url(https://alicdn.net)，因?yàn)樵贏pp端//是file協(xié)議

4、很多人在H5端聯(lián)網(wǎng)時(shí)使用本地測(cè)試服務(wù)地址(localhost或127.0.0.1)，這樣的聯(lián)網(wǎng)地址手機(jī)App端是無(wú)法訪問(wèn)的，請(qǐng)使用手機(jī)可訪問(wèn)的IP進(jìn)行聯(lián)網(wǎng)

@font-face { 　　font-family: "iconfont"; 　　src: url('//at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype'); }// 改為這樣即可：@font-face { 　　font-family: "iconfont"; 　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype'); }

推薦學(xué)習(xí)：《uni-app教程》