uniapp使用iconfont,uniapp引入组件不显示

　　应用程序上不显示uniicon的解决方案：1。不要使用非H5终端不支持的vue语法；2.在组件内部编写样式；3.修改路径“URL(https://alicdn . net)”；4.使用手机可访问的IP进行网络测试。

　　UNI-APP开发(仿饿)开发课程：进入学习

　　操作环境：Windows7系统，Uni-App版本2.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: icon font ；

　　src:URL( https://at . alicdn . com/t/font _ 2277759 _ 0 seoqjijl 89 r . TTF )格式( truetype )；

　　}5.最后，iconfont.css被引入到App.vue的样式标签中

　　6.重新编译，可以看到相应的图标。

二、解决真机中iconfont不显示的问题

　　问题：上述操作后，iconfont图标在H5正常显示，但在真机app上调试时，发现图标显示不成功。

　　解决方案：官方链接：https://uniapp.dcloud.io/matter

　　1.使用了H5不支持的vue语法，编写方法受到小程序自定义组件的限制。请参考。

　　2.不要直接在引用组件的组件属性上写style=xx ，而要在组件内部写style。

　　3.url(//alicdn.net)等路径改为url(https://alicdn.net)，因为//是App端的文件协议。

　　4.许多人在H5终端上联网时使用本地测试服务地址(localhost或127.0.0.1)。手机App终端无法访问此类网络地址。请使用手机可访问的IP进行联网。

　　@font-face {

　　font-family: icon font ；

　　src:URL(//at . alicdn . com/t/font _ 2277759 _ 0 seoqjijl 89 r . TTF )格式( truetype )；

　　}//改成这样：@font-face {

　　font-family: icon font ；

　　src:URL( https://at . alicdn . com/t/font _ 2277759 _ 0 seoqjijl 89 r . TTF )格式( truetype )；

　　}推荐学习：《uni-app教程》以上是如何解决app上不显示uni图标的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。