Element-Ui组件（二）Icon 图标_el-icon

Element-Ui组件（二）Icon 图标

本文参考Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component

基本用法
Element内置丰富的图标库，主要有以下2种用法：

1. 设置类名el-icon-xxx，通常使用i元素
2. 在Element部分组件中设置icon属性

页面效果
以下是通过上述两种用法制作的简单导航工具条：

示例代码

<template>
  <el-row>
    <el-col :span="6" class="title">
      <b><i class="el-icon-eleme" /> Element图标应用</b>
    </el-col>
    <el-col :span="6">
      <el-link icon="el-icon-s-home" type="primary">主页</el-link>&nbsp;
      <el-link>
        <i class="el-icon-user-solid"></i> 个人设置
      </el-link>
    </el-col>
    <el-col :span="6">
      <el-input suffix-icon="el-icon-search" size="mini"/>
    </el-col>
    <el-col :span="5" :offset="1">
      <el-button icon="el-icon-upload" type="primary" size="mini">登录</el-button>
      <el-button size="mini">
        <i class="el-icon-edit"></i> 注册
      </el-button>
    </el-col>
  </el-row>
</template>

<script>
export default {
}
</script>

<style>
.title {
  color: #409EFF
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

内置图标
以下为Element 2.8.2版本提供的所有图标：