vue项目引入阿里巴巴矢量图标库步骤详解-推荐

vue项目引入阿里巴巴矢量图标库步骤详解

第一步打开百度搜索阿里巴巴矢量图标库
官方网址:https://www.iconfont.cn/

第二步在搜索框搜索你想要的图标点击购物车图标 或者直接下载png或者jpg图标(这种是图片方式引入);

第三步点开右上角的购物车按钮

第四步会出现一个右侧抽屉点击添加至项目(需要登录,按照自己喜欢的登录方式进行登录)

第五步点击下载至本地下面是你原来或者刚才选的icon图标

第六步,在vue项目中解压刚才的文件放入vue的静态资源库里

第七步在main点js中引入(路径要找到解压文件下的iconfont.css文件)

import '../static/font_icon/iconfont.css'

第八步解压文件下有一个demo_index.html文件可以查看你现在的图标和命名

这是相对应的类名然后

在代码中加上上面图标的类名就可以出来所下载的图标了
注意:所有的类名前面都需要加上iconfont后面拼上你需要icon的类名就ok了

<span class="iconfont icon-xxx"></span>