Vue项目引入icon图标(阿里巴巴矢量图标库)_vue icon 图标集

当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是相关步骤。希望可以帮助到大家！

1.下载图标(下载代码的方式)

图标库网址：iconfont-阿里巴巴矢量图标库

1.1 选择需要的图标，将它添加入库

1.2 选完后点击右上角的购物车图标，以代码方式下载下来

1.3 就会得到一个下面样式的文件夹

2. 引入到项目中

2.1 修改文件名为“icon”，然后把icon文件复制到vue项目的assets目录

2.2 在main.js全局引入iconfont.css

import './assets/icon/iconfont.css'
//路径会有些出入）

2.3 使用，xxx是iconfont.css文件里的类名

<i style="margin-top:10px;" class="iconfont xxx"></i>

欢迎大家指点评论~ 点赞+关注⭐⭐⭐