Vue如何添加iconfont库图标以及怎样添加新图标

vue添加iconfont库到项目

一、打开iconfont官网
iconfont

二、选择自己想要图标加入购物车

三、打开购物车，把图标添加至项目，没有项目的可以建一个，名称自定义

四、可以选择第二种形式，操作比较容易

五、可以添加图标的前缀，以免和ElemetUI的图标冲突

六、点击下载至本地

七、下载之后，解压到本地，结构大概是这样的。

八、在assets新建一个icon文件把解压好的放入里面

九、在iconfont.css加入如下代码

/* 引入ali-icon */
[class^="icon-"],[class*=" icon-"]
{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

十、在main.js全局引入

import "./assets/icon/iconfont.css"

（也可以单独在需要的文件导入）

十一、点击复制图标代码

十二、把复制的代码引入到vue就可以用啦

vue添加新的图标到项目

一、选择想要添加的图标到项目

二、重新下载项目到本地，不过这回不是覆盖，而是替换

三、把解压的iconfont.css的这段代码替换你原来的iconfont.css的代码


四、新的图标就可以用啦！觉得文章用的，可以点个赞，支持下哦，谢谢！