折叠菜单图标不显示需检查 lay-shrink="1" 属性是否设置、使用 data-icon 替代内联图标、重置 a 标签 padding/line-height、切换状态后调用 layui.element.render()。
折叠菜单时图标不显示？检查 lay-shrink 类是否正确触发
layui 的左侧菜单折叠依赖于容器元素是否带有 lay-shrink="1" 属性（注意是字符串 "1"，不是布尔值 true），且必须配合 layui-side 或自定义的侧边栏结构使用。如果只加了类名 layui-nav-tree 但没设置该属性，折叠逻辑根本不会激活，图标自然不会保留。
实操建议：
- 确保侧边栏外层容器有
lay-shrink="1"，例如：<div class="layui-side layui-bg-black" lay-shrink="1">
- 菜单项需用
<ul class="layui-nav layui-nav-tree">包裹，每个菜单项为<li class="layui-nav-item"> - 图标必须写在
<a>内且位于文字前，如：<i class="layui-icon"></i> 控制台；若图标在文字后或被<span>套住，折叠时可能被隐藏或错位
layui-nav-item 折叠后图标消失？优先用 data-icon 属性而非内联 HTML
直接在 <a> 里写 <i> 标签，在折叠状态下容易被 CSS 的 overflow: hidden 或 text-overflow: ellipsis 截断，或者因宽度计算异常导致图标不可见。Layui 原生支持通过 data-icon 属性自动注入图标，更稳定。
实操建议：
- 改用
data-icon：<a href="#" data-icon="">控制台</a> - 确保引入了图标字体（
layui/css/layui.css已包含）且未被其他 CSS 覆盖font-family: layui-icon - 若仍不显示，检查浏览器控制台是否报
Failed to decode downloaded font，说明图标字体加载失败，需确认layui/fonts/路径可访问
折叠后图标位置偏移或尺寸异常？重置 .layui-nav-tree .layui-nav-item a 的内边距和行高
默认样式中，a 标签有 padding: 0 20px 和 line-height: 48px，折叠后文字隐藏，但 padding 仍在，会导致图标左右留白过大、居中失衡。Layui 并未为收缩态单独重置这些值，需手动干预。
实操建议：
- 添加自定义 CSS（放在
layui.css后）：.layui-side[lay-shrink="1"] .layui-nav-tree .layui-nav-item a { padding: 0 15px; line-height: 50px; } - 图标宽度固定为 20px 更稳妥，可加：
.layui-side[lay-shrink="1"] .layui-nav-tree .layui-nav-item a [class^="layui-icon"] { width: 20px; text-align: center; } - 避免用
margin-left调图标位置——折叠/展开切换时易引发重排抖动
动态切换折叠状态后图标不更新？别直接操作 DOM，用 layui.element 的 render()
如果通过 JS 手动切换 lay-shrink 属性（比如点击按钮 toggle），Layui 不会自动重新解析导航结构。图标渲染逻辑只在初始化或 element.render() 被显式调用时执行一次。
实操建议：
- 切换后必须调用：
layui.element.render('nav', 'your-nav-filter')（第二个参数是 nav 容器的filter值，如"sideNav"） - 若未设 filter，可用无参形式：
layui.element.render()，但会重绘全部模块，略低效 - 切忌用
$('.layui-nav').html(...)替换整个菜单结构——这会丢失事件绑定和图标渲染上下文
lay-shrink="1" 就根本没有折叠逻辑；没有 data-icon 或对应 CSS 重置，图标就只是普通内联元素，受父容器溢出规则支配。 
