uni圖示在app上不顯示的解決方法:1、不要使用非H5端不支援的vue語法;2、在元件內部寫樣式;3、修改路徑「url(https://alicdn .net)」;4、用手機可存取的IP進行連網測試。
本文操作環境:Windows7系統、uni-app2.5.1版,DELL G3電腦
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'); }
推薦學習:《uni-app教學》
#
以上是如何解決uni圖示在app上不顯示的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!

本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。

Uniapp中怎么实现全局消息提示及其组件?下面本篇文章给大家介绍一下Uniapp全局消息提示及其组件的实现方法,希望对大家有所帮助!


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版
視覺化網頁開發工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

記事本++7.3.1
好用且免費的程式碼編輯器