迷你图标按钮必须用 layui-icon 与 layui-btn-xs 组合，仅用图标类会撑高整行；layui-btn-xs 压缩高度至20px并缩减内边距，须搭配 layui-btn 基础类才生效，避免使用 padding 较大的主题类。
迷你图标按钮必须用 layui-icon + layui-btn-xs 组合，不能只靠 class 控制大小
直接写 <i class="layui-icon"></i> 会撑开整行高度，看起来又大又笨。layui 的按钮默认有 padding 和 line-height，图标只是其中一员，不加按钮类就无法继承尺寸控制逻辑。
正确做法是把图标包进超小按钮容器里：<button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="layui-icon"></i></button>。注意三点：
-
layui-btn-xs是关键，它把按钮高度压到 20px，内边距缩到最小 - 必须配
layui-btn基础类，否则layui-btn-xs不生效 - 避免用
layui-btn-normal或layui-btn-warm等带背景色的样式，它们默认 padding 更大，容易破坏“迷你”感
templet 里写迷你按钮要防 HTML 转义，d 是唯一可用数据变量
在 <script type="text/html" id="barDemo"> 模板里，Layui 会自动对内容做 HTML 转义。如果你写 <button>编辑</button> 没问题，但写成 <button><i class="layui-icon"></i></button>， 可能被当成文本渲染，而不是图标。
解决办法只有两个：
- 用实体字符写法：
（注意是开头，不是） - 或改用 Unicode 十六进制写法：
&\uE642;（Layui 模板支持） - 模板中所有字段取值必须用
d.xxx，比如{{# if(d.status == 1){ }}<button><i class="layui-icon"></i></button>{{# } }}
按钮太挤导致点击区域重叠？加 layui-mr5 或自定义 margin
多个迷你按钮并排时，Layui 默认没留横向间距，layui-btn-xs 的宽度又刚好卡死，手指一点可能同时触发两个事件。
推荐在每个按钮后加右外边距：
- 用内置辅助类：
<button class="layui-btn layui-btn-xs layui-btn-primary"><i class="layui-icon"></i></button><span class="layui-mr5"></span> - 或直接写内联样式：
style="margin-right: 5px;" - 别用
layui-ml5加左边距——那会让第一个按钮悬空，视觉失衡
如果用了 toolbar 配置操作列，这个间距必须写在模板里；如果是 templet 函数返回字符串，就在拼接 HTML 时加上。
图标不显示？先查字体是否加载、再看是否被 CSS 覆盖
常见现象：按钮框出来了，但里面空白，或者显示方块、问号。这不是模板或事件的问题，而是前端资源层失效。
排查顺序如下：
- 打开浏览器开发者工具，检查
Network标签页，搜索iconfont或layui.css，确认字体文件（通常是layui/iconfont.woff2）状态码是 200 - 选中按钮里的
<i>元素，在Computed面板看font-family是否为layui-icon，如果不是，说明你项目里其他 CSS 把它覆盖了 - 检查是否有全局重置样式（如
i { font-style: normal; }）干掉了图标字体的渲染逻辑 - 不要给
<i>设display: block或强行设宽高——layui-icon依赖 inline 渲染和 font-size 控制大小
最稳妥的兜底方式：在按钮上显式加 style="font-size: 14px;"，确保图标有基础尺寸可依。
