项目里如何引入阿里巴巴矢量图标库-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了

 

posted @ 2025-03-07 18:42  慕容冰菡  阅读(188)  评论(0)    收藏  举报