Element el-icon 图标组件详解

简介: 本文目录1. 背景2. 使用方式3. 图标列表

1. 背景

使用图标可以使我们的系统界面更加的炫酷美妙,Element也提供了一些常用的图标可以直接拿来使用。


2. 使用方式

第1种方式通过class样式使用,如下即显示了一个搜索图标。注意图标是以el-icon-开头的,后面的单词表示图标的含义。


<i class="el-icon-search"></i>

1

此时同样可以将图标放入按钮中。


   <el-button type="primary"><i class="el-icon-search"></i>搜索</el-button>

   <el-link type="primary"><i class="el-icon-search"></i>搜索</el-link>


第2中方式是可以直接指定组件的icon属性,这种方式下组件的显示会更加标准好看,推荐使用这种方式。


   <el-button type="primary" icon="el-icon-search">搜索</el-button>

   <el-link type="primary" icon="el-icon-search">搜索</el-link>


以上代码效果如下:

image.png

3. 图标列表

可以从官网查询所有支持的图标:图标列表

相关文章
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
1037 0
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
515 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
1470 0
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2927 0
Element el-button 按钮组件详解
|
7月前
|
JavaScript 测试技术 iOS开发
vue element plus Icon 图标
vue element plus Icon 图标
333 0
|
7月前
|
JavaScript API
vue element plus Button 按钮
vue element plus Button 按钮
216 0
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
|
XML JavaScript 小程序
element-ui下拉菜单组件Dropdown
<div id='app' style="margin:50px;"> <!-- 鼠标滑过显示下拉列表 这里设置了触发的方式,注意触发方式不能使用’:’绑定,以及绑定了触发选项时的方法 --> <el-dropdown trigger="hover" @command="handleCommand" > <span class="el-dropdown-link el-input__inner" style="display:block;width:200px;"> <!-- 没有选项的时候,默认显示的
226 0
|
JSON 数据格式
05zTree - 自定义图标(icon 属性)
05zTree - 自定义图标(icon 属性)
185 0
|
JavaScript
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)