iconfont彩色图标

1. 进入阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库，添加图标到项目，然后下载至本地

 解压后的本地文件如下，核心的是 iconfont.eot 文件

 

 

2.打开电脑命令行，执行以下命令，全局安装 iconfont-tools 转换工具

 npm install -g iconfont-tools

3.执行cd命令进入第1步解压后的文件夹后，再执行如命令，然后回车

iconfont-tools 

4.执行完，会多出来一个iconfont-app的文件夹

 

 5.进入iconfont-app文件夹，将其中iconfont-app-icon.css复制到项目的/static/icon/目录下

6.然后再app.vue引入该文件

<style>
/* 彩色的图标*/
     @import url("@/static/icon/iconfont-app-icon.css");

</style>

7.使用，其中mxg-icon 开头是必须的

<text class="mxg-icon mxg-icon-list-color"></text>

8.彩色图标当前对vue文件有效，控制台会关于background的相关警告，可忽略它