在uni-app项目中使用阿里巴巴矢量图标库
轻松让你的应用更美观,达到图标文字风格统一;十分用来制作个人的应用,节约设计上花费的时间。
图标查找并选择
- 登录阿里巴巴矢量图标库创建一个项目,并选择需要的图标添加到该项目中。
将图标下载到本地
- 下载项目图标并解压,找到iconfont.ttf字体文件包。
及使用字体图标,因为可以动态修改图标颜色,很方便;svg彩色图标是好看,但是支持不是很全
在uniapp项目中使用
- 将iconfont.ttf文件拷贝到项目的static目录下。
- 在项目根目录的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码不清楚可以在阿里图标库中查看或复制
<text class="iconfont"></text>
使用字体图标的好处
- 兼容性好,基本不考虑兼容问题。
- 大小随意调整,不失真。
- 图标颜色随意调整,方便做各种状态或风格。
什么都好,就是不能达到精美的多色效果;如果是简洁的办公应用推荐使用,如果是精致优雅的应用可以考虑svg等支持多色的格式。