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的代码
四、新的图标就可以用啦!觉得文章用的,可以点个赞,支持下哦,谢谢!