如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标step1在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的在线链接方式引入,所以这里也只介绍这种方式引入uni-appstep2把下面的代码放在app.vue里面/* icon图标 */@font-face {font-family...
·
如何在uni-app中引入iconfont图标
step1
在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的在线链接方式引入,所以这里也只介绍这种方式引入uni-app
step2
把下面的代码放在app.vue里面
/* icon图标 */
@font-face {
font-family: 'iconfont'; /* project id 1095188 */
src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot');
src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff') format('woff'),
url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.svg#iconfont') format('svg');
}
.icon {
font-size: 24upx;
color: #000000;
font-family: iconfont;
}
.icon-warning:before { // 需要使用的图标
content: '\e604';
font-size: 48upx;
}
<!--在别的地方使用-->
<text class="icon icon-warning"></text>
tips
@font-face 里引用链接必须加上https,从iconfont网站复制过来的代码是默认没有的,亲测在app端是必须的!
更多推荐
已为社区贡献2条内容
所有评论(0)