使用iconfont网站的大体流程是不变的前端使用阿里iconfont引入字体图标_Eric加油学!的博客-CSDN博客_前端引入iconfont
首先,打开阿里iconfont图标库,搜索自己想要的图标,加入购物车
相应的图标都加入购物车以后,点击购物车,添加到相应的项目中去
然后就可以在我的项目中看到你刚才所添加的图标了
我这里采用了Font class的在线引入方式。 第4步如果初使用时是没有在线链接的,需要点击生成。(后续,如果该项目中又添加了新的图标,也需要点击重新生成新的链接)
复制这串代码,到我们想要添加的Vue组件中去,比如我要添加这个搜索图标,我放置在了WebHead.vue组件中。
<div class="searchicon">
<i class="iconfont icon-sousuo1"></i>
</div>
在.vue文件中,css样式里引入在线链接(记得加上http:),在template模版中,放入想要的图标 ,我这里用的是最右边的icon-sousuo1图标。 (记得要在前面加上 iconfont)
这样就可以实现简单的在线引入iconfont图标了。
后续如果要对图标进行样式调整,可以直接在css中调整
.iconfont{
font-size: 18px;
color: #fff;
}