阿里图标iconfont在vue项目中使用

437 阅读1分钟
图标库地址:

iconfont-阿里巴巴矢量图标库

搜索要用到的图标类型:

微信截图_20220402161946.png

添加到购物车:

微信截图_20220402162000.png

查看已经放进购物车的图标:

微信截图_20220402162008.png

添加到新的项目中:

微信截图_20220402162016.png

进行保存,此时需要用到的图标都打包进了该项目:

微信截图_20220402162026.png

此处可以编辑图标的class名字和颜色等:

微信截图_20220402162035.png

按成编辑后下载,打包成压缩包:

微信截图_20220402162046.png

接下来会用到这三个文件:

微信截图_20220402162053.png

在main.js引入css文件:

微信截图_20220402162111.png

在css文件中更改引入src路径:

微信截图_20220402162117.png

成功使用

微信截图_20220402162124.png

\