vue中引入iconfont图标

vue中引入iconfont图标

本文的主要目的是介绍如何在vue中引入iconfont图标。

1、首先需要登录iconfont官网。

http://www.iconfont.cn/

2、选择喜欢的图标保存到自己的仓库中。

3、添加到购物车后，能够添加到项目中。

4、保存成功后，在自己的项目中就能够看到了

5、查看当前项目的属性

6、下载资源到本地

7、解压后复制到项目的src/assets文件夹下。

8、修改iconfont.css,把.iconfont修改成如下内容

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

9、在使用的页面中先引入css

@import "../assets/iconfont/iconfont.css";

10、在页面中使用

<i class="el-icon-xy-sleep"></i>
      <el-button icon="el-icon-xy-sleep">sleep</el-button>

11、运行效果：