uniapp中使用阿里巴巴图标iconfont

Posted 3SU

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp中使用阿里巴巴图标iconfont相关的知识,希望对你有一定的参考价值。

uniapp本地使用iconfont

iconfont:https://www.iconfont.cn

从iconfont中选择图标,下载之后解压缩包,保留 iconfont.css、iconfont.ttf

将此文件拷贝到uniapp目录中(我是拷贝到colorui目录下)

iconfont.css中要修改

@font-face {font-family: "z_iconfont"; /*默认值是iconfont,但好像说 iconfont 是 uni 的关键字暂不能用,所以我自己项目那边改为z_iconfont*/
src:
url(‘iconfont.ttf?t=1592624240199‘) format(‘truetype‘) /* chrome, firefox, opera, Safari, android, ios 4.2+ */
}

.iconfont {
font-family: "z_iconfont" !important; /*这里也要改*/
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

然后在main.js文件中import

import z_iconfont from ‘./colorui/iconfont/iconfont.css‘

然后就可以直接在项目中使用

<span class="iconfont icon-tubiao5 text-orange"></span>  

以上是关于uniapp中使用阿里巴巴图标iconfont的主要内容,如果未能解决你的问题,请参考以下文章

uniapp使用iconfonts图标不显示以及颜色问题

Uniapp使用iconfont

阿里巴巴iconfont的正确使用方法

阿里巴巴IconFont的图标的下载使用

vue 项目中使用阿里巴巴矢量图标库iconfont

iconfont阿里巴巴图标有填色吗