阿里图标库怎么导入到项目中

阿里图标库

进入阿里图标库的官网 https://www.iconfont.cn/

展示的上图，登录你自己的账号，这里随便写搜索一个图标setting

将鼠标浮在想要的图标上面 点击购物车，使其加入购物车

点击自己的购物车

点击 ‘添加至项目’时，会弹出

自己起一个名字，点击确定就行了

然后按照从上到下的红色框顺序，找到自己的图标

鼠标浮到图标上，那个右上角的红色图标，可以进去编辑，根据项目要求，把图标名字改了

点击后弹出

上面可以根据需求调整颜色，下面是你自己更改图标名字的地方

然后点击下载至本地

自己保存在文件夹中，解压后，出现以下几个文件（老版本）

新版本为

将红框的拿出来，放到项目的style文件夹下的fonts文件夹中去

然后 在打开iconfonts.css，注意url路径的正确，然后类名是否正确，使用的时候，直接写类名就行了

最后在vue的main.js中引入图标库

注：这里的style路径的缩写，

对于绝对路径名字的更改，你可以在buil的webpack-base-config.js文件中，

更改自己想要路径，然后引入的时候，就可以缩写路径，改完记得npm run dev 配置文件更改，需要重新启动，否则不生效