iconfont彩色图标

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

iconfont彩色图标_第1张图片 解压后的本地文件如下,核心的是 iconfont.eot 文件

 iconfont彩色图标_第2张图片

 

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

 npm install -g iconfont-tools

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

iconfont-tools 

iconfont彩色图标_第3张图片

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

iconfont彩色图标_第4张图片 

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

iconfont彩色图标_第5张图片

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

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

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

你可能感兴趣的:(uniapp,前端)