Element-Ui组件（二）Icon 图标

最新推荐文章于 2025-07-10 13:24:12 发布

原创最新推荐文章于 2025-07-10 13:24:12 发布 · 10w+ 阅读

279 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Element #html

Vue.js 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍Element-UI图标库的使用方法，包括如何在网页中设置类名使用图标，以及在组件中设置icon属性的应用实例。通过示例代码展示了导航工具条的设计，覆盖Element2.8.2版本的所有内置图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-Ui组件（二）Icon 图标

本文参考Element官方文档：

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

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

设置类名el-icon-xxx，通常使用i元素
在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>

内置图标
以下为Element 2.8.2版本提供的所有图标：
在这里插入图片描述