Vue项目中使用Iconfont字体图标
2019-07-03 本文已影响0人
小王子__
1, 进入网站:Iconfont网址:http://www.iconfont.cn
2.,点击网站上方的“官方图标库”,选择自己喜欢的图标,并加入购物车
3,图标全部选择完成后,点击右上方的购物车,选择添加至项目,如果没登录http://www.iconfont.cn的话 会让你先登录(我选择github登录的),登录之后点击添加至项目-新建项目-确定
4,确定之后会到这个界面:

有三种方式引入,我选择的简单的方式也就是第二个Font class方式
点击查看在线链接,会生成一个链接:

复制链接到你的vue项目 找到index.html link引入即可
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1273625_e3o6far0cre.css">
使用的时候:
<i class="icon iconfont icon-aixin"></i>