uni圖標在app上不顯示的解決辦法:1、不要使用非H5端不支持的vue語法;2、在組件內部寫樣式;3、修改路徑“url(https://alicdn.net)”;4、用手機可訪問的IP進行聯網測試。
uni圖標在app上不顯示?
uniapp引入iconfont圖標及解決真機中iconfont不顯示的問題
一、uniapp中如何引入iconfont圖標
1、先從iconfont網站下載項目文件。如圖:
2、下載好的iconfont文件解壓,取iconfont.css放入自己工程目錄
3、回到iconfont網站,點擊復制代碼,只需要ttf格式的地址就行
4、打開項目中的iconfont.css文件,用復制的ttf格式的代碼寫進@font-face中,如下:
@font-face { font-family: "iconfont"; src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype'); }
5、最后在App.vue 的 style標簽中引入iconfont.css
6、重新編譯,可以看到應的圖標。
二、解決真機中iconfont不顯示的問題
問題:經過如上操作,iconfont圖標在H5里是正常顯示了,但是當在真機app上調試時卻發現icon顯示不成功。
解決方案:官方鏈接:https://uniapp.dcloud.io/matter
1、使用了非H5端不支持的vue語法,受小程序自定義組件限制的寫法,詳見
2、不要在引用組件的地方在組件屬性上直接寫 style="xx",要在組件內部寫樣式
3、url(//alicdn.net)等路徑,改為url(https://alicdn.net),因為在App端//是file協議
4、很多人在H5端聯網時使用本地測試服務地址(localhost或127.0.0.1),這樣的聯網地址手機App端是無法訪問的,請使用手機可訪問的IP進行聯網
@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'); }