MUI之阿里矢量图
MUI之阿里矢量图
1.首先去阿里巴巴矢量图库选择自己喜欢的矢量图添加到购物车如图:
2.选择下载代码解压后文件如图:
3.把iconfont.css和iconfont.js放入项目中原有的css文件和js文件
4.修改iconfont.css文件不修改,不能使用矢量图
1)原图
2)修改后
5.页面中使用矢量图一共有三种方法我就介绍两种:
第一种方法只需要在页面中引入iconfont.css<span class="mui-icon iconfont icon-xunjianjianyan"></span>
第二种方法需要引入iconfont.js(这种方法也是官方推荐)<svg class="icon" aria-hidden="true"><use xlink:href="#icon-ditu"></use></svg>
效果图:
彩色矢量图是采用第二种方法
Your effort is to live up to yourself.