vue中引入iconfont图标

vue中引入iconfont图标本文的主要目的是介绍如何在vue中引入iconfont图标。1、首先需要登录iconfont官网。http://www.iconfont.cn/2、选择喜欢的图标保存到自己的仓库中。3、添加到购物车后，能够添加到项目中。4、保存成功后，在自己的项目中就能够看到了5、查看当前项目的

archer.wu

9204人浏览 · 2017-11-15 21:26:49

archer.wu · 2017-11-15 21:26:49 发布

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、运行效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^