Element el-icon 图标组件详解

向右看齐 2023-01-11 16:21 380阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 使用方式
 *  3. 图标列表

# 1. 背景 #

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

# 2. 使用方式 #

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

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

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

<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>

以上代码效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 图标列表 #

可以从官网查询所有支持的图标：[图标列表][Link 2]。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/97b846ddb1184dbb81be2ae66967a633.png
[Link 2]: https://element.eleme.cn/#/zh-CN/component/icon

发表评论取消回复

表情：

评论列表（有 0 条评论，380人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element el-button 按钮组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按

今天药忘吃喽~/ 2023年01月12日 01:48/ 0 赞/ 347 阅读

相关 Element el-icon 图标组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 使用方式 3. 图标列表 1. 背景使用图标可以使我

向右看齐/ 2023年01月11日 16:21/ 0 赞/ 381 阅读

相关 Element el-row el-col 布局组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对

古城微笑少年丶/ 2023年01月11日 15:27/ 0 赞/ 199 阅读

相关 Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标博主很久之前就想使用Element-UI，总是因为需要学习后端技术

旧城等待，/ 2022年12月27日 12:51/ 0 赞/ 304 阅读

相关【组件】element图片上传组件

> `前言` 封装的图片上传组件 <template> <div class="public-upload-image"> <el-up

Myth丶恋晨/ 2022年12月19日 03:38/ 0 赞/ 31 阅读

相关 element ui 自定义icon图标

因为要按照原型图设计实现页面，在element ui自带的图标库好像没有，所以按钮的图标icon需要自定义，原型如下图所示。 ![在这里插入图片描述][202

左手的ㄟ右手/ 2022年12月15日 02:20/ 0 赞/ 452 阅读

相关 Element el-container 布局容器组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 全局样式 3. 布局代码 4. 增加导航菜单 5.

谁借莪１个温暖的怀抱￠/ 2022年11月19日 07:51/ 0 赞/ 333 阅读

相关 vue打包element图标变成方格

问题 vue经过npm run build打包上线以后出现了element图标变成方格的问题。 ![在这里插入图片描述][20210302141204821.png]

╰+攻爆jí腚メ/ 2022年10月23日 15:30/ 0 赞/ 506 阅读

相关 Element el-rate 评分组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 基本用法 3. 显示分值 4. 辅助文本 5. 只

比眉伴天荒/ 2022年09月16日 04:45/ 0 赞/ 513 阅读

相关 Bootstrap图标菜单按钮组件

小图标组件 > Bootstrap提供了免费的263个小图标，具体可以参考[中文官网的组件连接][Link 1] ![部分图标如下：][SouthEast] > 使用

偏执的太偏执、/ 2022年06月12日 04:15/ 0 赞/ 291 阅读