Vue中在线引用iconfont图标

使用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;
}