uniapp引入iconfont图标及解决真机中iconfont不显示的问题

摘要:
2、 解决iconfont在真机中不显示的问题:经过上述操作,iconfont图标在H5中正常显示,但在真机app上调试时发现图标显示不成功。

一、uniapp中如何引入iconfont图标

1、先从iconfont网站下载项目文件。如图:

uniapp引入iconfont图标及解决真机中iconfont不显示的问题第1张

2、下载好的iconfont文件解压,取iconfont.css放入自己工程目录

uniapp引入iconfont图标及解决真机中iconfont不显示的问题第2张

3、回到iconfont网站,点击复制代码,只需要ttf格式的地址就行

uniapp引入iconfont图标及解决真机中iconfont不显示的问题第3张

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

uniapp引入iconfont图标及解决真机中iconfont不显示的问题第4张

6、重新编译,可以看到应的图标。

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

  问题:经过如上操作,iconfont图标在H5里是正常显示了,但是当在真机app上调试时却发现icon显示不成功。

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

uniapp引入iconfont图标及解决真机中iconfont不显示的问题第5张

@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');
}

免责声明:文章转载自《uniapp引入iconfont图标及解决真机中iconfont不显示的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇1.2.1LVM逻辑卷镜像实现方法全网数据库大全下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

html颜色代码对照表

<style type="text/css"><!--.menuskin {}{    BORDER: #666666 1px solid; VISIBILITY: hidden; FONT: 12px Verdana;width:90px;    POSITION: absolute;     BACKGROUND-COLOR:#EF...

微信小程序小方块

第一步:配置animation.wxml文件(相当于html显示的页面) <import src="http://t.zoukankan.com/common/header.wxml" /> <import src="http://t.zoukankan.com/common/footer.wxml" /> <view cl...

python xlrd,xlwt 读写excel文件

python 读excel文件,需要xlrd库。下载地址:https://pypi.python.org/pypi/xlrd python 写excel文件,需要xlwt库。下载地址:https://pypi.python.org/pypi/xlwt/1.1.2 下载后修改扩展名为rar, 解压后安装: 安装成功后就可以引用了。如下代码: # -*- c...

QT中文字的绘制

为什么要做这次文字的介绍,因为在一般的教材中,还真没有文字的描述: 1.绘制最简单的文字。 我们更改重绘函数如下: void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);painter.drawText(100,100,”yafeilinux”);} 我们在(100,100)的位置显示了...

h5固定表头公共样式

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <meta content="yes" name="apple-mo...

content: "f015";自带常见图标icon

简介:让你可以即时定制的可伸缩矢量图标;    公有302种图标任你选择;    图标的风格,如:大小、颜色、阴影可以通过css样式修改;     支持ie6、7;  example: <!DOCTYPE html> <html > <head> <meta charset="UTF-8" /> <m...