Layui菜单图标直接在标签添加layui-icon和具体图标类名（如layui-icon-home）即可显示，无需额外JS；需引入layui.css，图标本质为字体，可用CSS调大小、颜色。
直接在对应菜单项的 <i></i> 标签上加 layui-icon 类和具体图标类名即可，无需额外 JS 或配置。
1. 基础写法：用 i 标签嵌入图标类名
Layui 导航菜单本质是普通 HTML 结构，图标通过内联元素（推荐 <i></i>）配合类名渲染。只要确保引入了 layui.css，就能直接使用内置图标。
- 菜单结构示例（
lay-nav是 Layui 推荐的导航容器类）：
<ul class="lay-nav"><br> <li class="lay-nav-item"><i class="layui-icon layui-icon-home"></i> 首页</li><br> <li class="lay-nav-item"><i class="layui-icon layui-icon-user"></i> 用户中心</li><br> <li class="lay-nav-item"><i class="layui-icon layui-icon-set"></i> 系统设置</li><br></ul>
每个 <i></i> 标签必须同时具备：
– layui-icon（声明这是 Layui 字体图标）
– 具体图标类名（如 layui-icon-home、layui-icon-user）
2. 图标类名从哪找？
官方图标列表在 Layui 文档「字体图标」页完整公开，所有类名都以 layui-icon- 开头。常见有：
-
layui-icon-home（首页） -
layui-icon-user（用户） -
layui-icon-set（设置） -
layui-icon-table（表格） -
layui-icon-file（文件） -
layui-icon-survey（统计）
不记得类名时，打开 Layui 官方图标文档 搜索关键词即可，支持实时预览和复制。
3. 自定义样式：调大小、改颜色
因为图标本质是文字，所以直接用 CSS 控制 font-size 和 color 就行，无需额外 hack。
- 统一调整所有菜单图标大小：
.lay-nav-item .layui-icon { font-size: 18px; } - 单独给“系统设置”加红色：
.lay-nav-item:nth-child(3) .layui-icon { color: #ff5722; } - 悬停时变色（增强交互）：
.lay-nav-item:hover .layui-icon { color: #009688; }
4. 注意事项
避免以下常见问题：
- 漏掉
layui-icon类 —— 单独写layui-icon-home不生效 - 误用块级标签（如
<div>）包裹图标 —— 可能破坏行内对齐，坚持用 <code><i></i>或<span></span> - 图标显示为方块或问号 —— 检查是否漏引
layui.css，或浏览器控制台是否有字体文件 404 - 自定义图标（如 iconfont）混用 —— 不要和
layui-icon类共存于同一元素，前缀需独立（如icon-xxx）
