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

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

相关文章
|
前端开发 API
vue3+TS实战中Dialog弹窗封装复用的技巧
Dialog弹窗在后台管理系统中是使用频率非常高的组件,添加和修改数据基本都会用到,本文就讲讲在vue3和ts的项目中如何封装Dialog组件,实现代码高复用
3826 0
vue3+TS实战中Dialog弹窗封装复用的技巧
|
JavaScript API
Vue开发股票展示页面
Vue开发股票展示页面
696 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10693 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
11月前
|
数据可视化 测试技术 Go
Go 语言测试与调试:`go test` 工具用法
`go test` 是 Go 语言内置的测试工具,支持单元测试、基准测试、示例测试等功能。本文详解其常用参数、调试技巧及性能测试命令,并提供实际项目中的应用示例与最佳实践。
|
Ubuntu 关系型数据库 MySQL
mysql8.0安装初始化不需要设定root密码?
uubntu 的mysql安装完成后无法设定root密码
608 10
|
SQL JSON 前端开发
若依RuoYi脚手架二次开发教程(二次开发必学技能)
本次我们将通过一个菜品管理模块开发的案例,来演示拿到若依框架后,如何在若依管理系统上进行二次开发,升级改造为自己的管理系统。适合以若依作为项目脚手架的公司开发人员、毕业设计的学生及开源项目学习者。
10010 1
若依RuoYi脚手架二次开发教程(二次开发必学技能)
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
存储 JavaScript
vue项目中页面跳转传参的方法
vue项目中页面跳转传参的方法
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
3083 0
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1740 0