Layui字体图标大全

Layui字体图标大全

本工具收录并整理了 layui 框架中所有可用的字体图标（layui icon），涵盖功能图标、方向图标、状态图标、操作图标等常见类型。每个图标均提供对应的 class 类名，方便开发者在实际项目中快速调用与复制使用，提升前端开发效率。

Layui 图标采用字体形式，取材于阿里巴巴矢量图标库 iconfont，因此可以把一个 icon 看作是一个普通的文本，直接通过 css 即可设定其样式。图标支持 font-class 或 unicode 两种格式。

图标使用说明

layui 字体图标使用方式非常简单，只需在页面中引入 layui 样式文件，然后通过 class 类名即可调用图标。

基础用法

<i class="layui-icon layui-icon-home"></i>

通过修改 class 名称中的图标标识，即可切换不同的图标样式。

调整大小与颜色

可以通过 CSS 控制图标的大小与颜色，使其适配不同的页面风格：

.layui-icon {
  font-size: 20px;
  color: #333;
}

使用场景说明

layui 图标广泛应用于后台管理系统、数据表格操作、导航菜单、按钮组件以及提示信息等场景。在页面中合理使用图标，可以显著提升界面美观度和用户操作体验。

例如在按钮中加入图标，可以增强操作指引；在侧边菜单中加入图标，可以提高导航识别效率；在状态提示中使用图标，可以让用户更快速理解信息内容。

官方资源

Layui 官方文档与资源地址：https://layui.dev