EL-Icon 图标大全详解

发布时间：2023-05-22

一、隐藏 el-icon 图标

有时候我们只想用 el-icon 图标的样式，但是不需要图标，这时我们可以通过一个小技巧来实现：使用伪元素将图标内容隐藏。

.el-icon:before {
   content: "";
}

以上代码可以将 el-icon 的内容隐藏。

二、常见的 el-icon 图标

EL-Icon 图标大全包含了超过 600 个图标，涵盖了日常开发中经常会用到的图标和一些特殊的图标。这里我们来介绍一些常见的图标。

  1. el-icon-arrow-up 这是一个向上的箭头图标，一般用在列表中表示“上移”。
<i class="el-icon-arrow-up"></i>
  1. el-icon-arrow-down 这是一个向下的箭头图标，一般用在列表中表示“下移”。
<i class="el-icon-arrow-down"></i>
  1. el-icon-edit 这是一个编辑图标，一般用在表格中表示“编辑”操作。
<i class="el-icon-edit"></i>
  1. el-icon-delete 这是一个删除图标，一般用在表格中表示“删除”操作。
<i class="el-icon-delete"></i>
  1. el-icon-search 这是一个搜索图标，一般用在搜索框中表示“搜索”功能。
<i class="el-icon-search"></i>

三、如何使用自定义图标

如果当前 EL-Icon 图标大全中没有你需要的图标，可以通过以下方式使用自定义图标：

  1. 引入自定义图标的 CSS 文件 例如，我们有一个名为 “my-icon” 的自定义图标，它的 CSS 样式如下：
.my-icon {
   font-family: 'My-Icons';
   font-size: 20px;
   font-style: normal;
   line-height: 1;
   font-weight: 400;
   display: inline-block;
   text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.my-icon::before {
   content: '\E601';
}
  1. 在需要使用自定义图标的地方添加对应的 class 如下代码所示，我们在 div 中添加了 .my-icon class，这样 div 就变成了自定义图标。
<div class="my-icon"></div>

四、EL-Icon 图标大全的使用建议

EL-Icon 图标大全提供了非常丰富的图标，但是在使用时需要注意以下问题：

  1. 不要过度依赖图标。 无论是使用常用的图标还是自定义的图标，都应该考虑到使用场景，不要过度依赖图标，而忽略了良好的 UI 和 UX 设计。在合适的场景下使用图标，才能使应用更加直观、易用。
  2. 建立自己的图标库。 一般来说，每个应用都有自己的特殊需要，因此建立自己的图标库很重要。这样可以有效地减少依赖于外部库的情况，使应用更加独立和可维护。
  3. 注意图标的大小和颜色。 在使用图标时，要注意图标的大小和颜色。过大或过小的图标会影响应用的美观度，而颜色的搭配也会直接影响到用户的视觉体验。

五、EL-Icon 图标大全的附加资源

EL-Icon 还提供了其他一些附加资源，包括：

  1. SVG 图标的源码 如果需要在应用中使用 SVG 图标，可以直接从 EL-Icon 的仓库中下载 svg 源码。
  2. 静态图片的素材 如果需要在应用中使用静态图片，可以从 EL-Icon 的仓库中下载图片素材。 通过以上资源可以更加灵活地使用 EL-Icon 带来的优势。
推荐文章