折叠菜单图标不显示需检查 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"> <li>菜单项需用 <code><ul class="layui-nav layui-nav-tree"></ul></code> 包裹，每个菜单项为 <code><li class="layui-nav-item"></code> </li> <li>图标必须写在 <code>@#@#@#@#@#@#@#@#@#@0</code> </li> <li>确保引入了图标字体（<code>layui/css/layui.css</code> 已包含）且未被其他 CSS 覆盖 <code>font-family: layui-icon</code> </li> <li>若仍不显示，检查浏览器控制台是否报 <code>Failed to decode downloaded font</code>，说明图标字体加载失败，需确认 <code>layui/fonts/</code> 路径可访问</li> <h3>折叠后图标位置偏移或尺寸异常？重置 <code>.layui-nav-tree .layui-nav-item a</code> 的内边距和行高</h3> <p>默认样式中，<code>a</code> 标签有 <code>padding: 0 20px</code> 和 <code>line-height: 48px</code>，折叠后文字隐藏，但 padding 仍在，会导致图标左右留白过大、居中失衡。Layui 并未为收缩态单独重置这些值，需手动干预。</p> <p>实操建议：</p> <ul> <li>添加自定义 CSS（放在 <code>layui.css</code> 后）：<pre class="brush:php;toolbar:false;">.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 重置，图标就只是普通内联元素，受父容器溢出规则支配。
