Layui如何在表格中使用外部的图标库（如FontAwesome）-Layui教程-PHP中文网

fontawesome图标在layui-table中需用包裹，设display:inline-flex和align-items:center；templet中应确保字体加载完成，css需前置；按钮内混排图标文字须用flex对齐。

直接在 layui-table 的列模板（templet）里写  是可行的，但大概率会偏位、颜色错乱、点击区域异常——根本原因不是图标没加载，而是 layui 表格单元格默认用 line-height 和 vertical-align: middle 做垂直居中，而 font awesome 图标是纯行内元素，不响应这些规则。

表格列中插入 FontAwesome 图标必须加容器包裹

Layui 表格每列内容默认被包裹在 div.layui-table-cell 里，其内部对子元素做基线对齐。Font Awesome 图标若裸写 ，会因字体度量差异上浮或下沉，尤其在 layui-table-sm 下更明显。

正确写法：用  包裹，其中 .fa-inline 定义为 display: inline-flex; align-items: center;
不要依赖 vertical-align: middle 或 line-height 调整——不同字号下偏移量不一致，且和 layui-table-header 的行高可能冲突
如果列内容含文字+图标（如「编辑」），确保整个 span 设置 font-size 与文字一致，否则图标相对文字缩放失真

templet 函数里动态渲染图标要等字体就绪

在 templet: function(d) { return ''; } 这类函数中返回图标 HTML，不代表浏览器此时已加载完 Font Awesome 字体文件。Network 面板常可见图标先显示为方块，100–300ms 后才正常，尤其在弱网或首次访问时。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

最稳妥做法：把 Font Awesome 的 <link> 放在 layui.css 之前，让样式尽早注册，避免渲染阻塞
不推荐用 setTimeout 等固定毫秒数——设备性能、缓存状态差异大，容易失效
若必须动态判断，可用 document.fonts.load('1em "Font Awesome 6 Free"')，但需兼容 IE/旧版 Edge，建议 fallback 到检查 document.styleSheets 中是否已存在对应 CSSRule

表格操作列按钮里混用图标和文字要重置 display

当在 toolbar 或 lay-event 按钮中同时放图标和文字（如 <button class="layui-btn layui-btn-xs"> 删除</button>），Layui 默认给 .layui-btn 设了 display: inline-block 和固定 line-height，导致图标和文字上下不对齐。

解决方案：给按钮加 style="display: inline-flex; align-items: center; gap: 4px;"，或统一定义 .layui-btn.fa-btn { display: inline-flex; align-items: center; gap: 4px; }
避免给 i.fa 单独设 margin-top 或 position: relative——响应式切换尺寸（layui-btn-sm/lg）时需重复调整
注意：Layui 的 btn-group 对 flex 容器支持良好，但老版本（gap 兼容性差，可改用 padding-left 替代