项目里如何引入阿里巴巴矢量图标库-iconfont
项目里如何引入阿里巴巴矢量图标库-iconfont
一、搜索或者直接选择自己想要的图标类型(地址:https://www.iconfont.cn/)
二、选中想要的图标,加入购物车,可以选择多个
三、点击购物车可以将选择的图标加入原有项目,也可以新建项目
四、确定之后,选择下载至本地(下载后的图标是灰色的,没有颜色,若想有颜色看第五大点)
1)将图标下载下来
2)将选中的文件复制到项目里,自己在static下建个文件夹放里
3) 在App.vue中<style>标签里引入iconfont.css文件
4)打开iconfont.css文件,找到对应图标的名字,使用时用icon-a-083_meishi这种
5)使用的时候直接替换icon-xxx就OK了
五、彩色iconfont
1)找到项目路径,输入cmd,打开控制台
2)输入命令下载插件:npm install -g iconfont-tools
3)输入命令:iconfont-tools运行时,一直按ENTER,最后会多出一个iconfont-webapp文件夹
4)在文件夹中找到iconfont-webapp-icon.css文件,和本文档第四大点第二小点的文件放一起就行
5)在App.vue中<style>标签里引入iconfont-webapp-icon.css文件
6)打开iconfont-weapp-icon.css文件,找到对应图标的名字,使用时用t-icon-shousi 这种
7)使用的时候直接替换t-icon-xxx就OK了