在uni-app项目中使用阿里巴巴矢量图标库
1、在阿里巴巴矢量图标库创建一个项目,并选择需要的图标添加到该项目中。
下载项目图标并解压,将 iconfont.ttf 文件拷贝到项目的 static 目录下。及使用字体图标,因为可以动态修改图标颜色,很方便;svg 彩色图标是好看,但是支持不是很全
在项目根目录的 App.vue 文件中进行全局引用:
<style>
/*导入字体图标*/
@font-face {
font-family: 'iconfont';
src: url('~@/static/iconfont.ttf') format('truetype');
}
/*设置字体图标*/
.iconfont {
font-family: "iconfont" !important;
font-size: 1em;
font-style: normal;
}
</style>
在页面中随意使用字体图标:如果图标unicode码不清楚可以在阿里图标库中查看或复制
// 这里一定要加上 class="iconfont"
<text class="iconfont"></text>