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. 图标列表

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

相关文章
|
9月前
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
532 0
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2445 0
Element el-button 按钮组件详解
|
3天前
|
JavaScript 测试技术 iOS开发
vue element plus Icon 图标
vue element plus Icon 图标
41 0
|
3天前
|
JavaScript API
vue element plus Button 按钮
vue element plus Button 按钮
41 0
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
|
3天前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
3天前
|
JavaScript
Mint UI tab-container 结合 tabbar
Mint UI tab-container 结合 tabbar
|
5月前
|
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;"> <!-- 没有选项的时候,默认显示的
49 0
|
7月前
|
JSON 数据格式
05zTree - 自定义图标(icon 属性)
05zTree - 自定义图标(icon 属性)
65 0
|
8月前
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
108 1