MUI之阿里矢量图

MUI之阿里矢量图


1.首先去阿里巴巴矢量图库选择自己喜欢的矢量图添加到购物车如图:

MUI之阿里矢量图

2.选择下载代码解压后文件如图:

MUI之阿里矢量图

3.把iconfont.css和iconfont.js放入项目中原有的css文件和js文件

4.修改iconfont.css文件不修改,不能使用矢量图

1)原图

MUI之阿里矢量图

2)修改后

MUI之阿里矢量图

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>

效果图:

MUI之阿里矢量图

彩色矢量图是采用第二种方法

1
  • MUI之阿里矢量图
  • MUI之阿里矢量图
  • MUI之阿里矢量图
  • MUI之阿里矢量图

声明:龙筱福|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - MUI之阿里矢量图

MUI之阿里矢量图
Author

bitter


Your effort is to live up to yourself.