必须将 Font Awesome CDN 放在 layui.css 之前且禁用 async/defer，表格图标需包裹 .fa-inline，按钮图标应使用 .fa-btn 类，动态渲染前需确保字体加载完成，表单组件内图标无法替换。
直接在 layui-icon 上覆盖 font-family 或硬改 layui.css，图标大概率会集体失效、主题错乱、升级后被覆盖——这不是配置问题，是架构冲突。
Font Awesome 的 CDN 必须放在 layui.css 之前
顺序错误是图标显示为方块的最常见原因。Layui 渲染表格、按钮时会立即读取当前生效的字体规则，如果 Font Awesome 的 CSS 还没加载完，<i class="fa fa-edit"></i> 就只能 fallback 到系统默认字体。
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">放在<link rel="stylesheet" href="/path/to/layui.css">之前 - 不要用
async或defer加载 Font Awesome CSS —— 它必须同步阻塞，确保样式注册早于 Layui 初始化 - 验证方式：打开 DevTools → Elements → 找一个
<i class="fa fa-search"></i>，检查 computed tab 中font-family是否已包含"Font Awesome 6 Free"
表格列（templet）里写图标必须套 <span class="fa-inline"></span>
Layui 表格单元格默认用 line-height + vertical-align: middle 垂直居中，而 Font Awesome 图标是纯行内元素，基线位置和文字不一致，尤其在 layui-table-sm 下偏移明显。
- 裸写
<i class="fa fa-edit"></i>会浮动、点击区域错位、颜色继承异常 - 必须包裹：
<span class="fa-inline"><i class="fa fa-edit"></i></span> - CSS 定义：
.fa-inline { display: inline-flex; align-items: center; }—— 不要用margin-top或vertical-align硬调，不同字号下偏移量不可控 - 若列内容含文字（如「编辑」），整个
<span></span>需设统一font-size，否则图标缩放失真
按钮（layui-btn）里混排图标和文字要重置 display
Layui 按钮默认设了 display: inline-block 和固定 line-height，导致 <i class="fa fa-trash"></i> 删除 中图标上浮、文字下沉。
- 不要给
<i></i>单独加margin或position—— 响应式断点下会崩 - 推荐方案：定义
.layui-btn.fa-btn { display: inline-flex; align-items: center; gap: 4px; }，然后写<button class="layui-btn layui-btn-xs fa-btn"><i class="fa fa-trash"></i> 删除</button></li> <li>如果按钮带 <code>lay-submit
或lay-event，确保外层<button></button>是唯一可点击容器，别把图标单独绑定事件
动态渲染（如 layer.msg、templet 函数）前要等字体就绪
在 layui.use 回调里插入 <i class="fa fa-user"></i>，不代表字体已加载完成。弱网或首次访问时，图标常先闪成方块再变正常。
- 不推荐
setTimeout等固定毫秒数 —— 设备性能、缓存状态差异太大 - 稳妥做法：把 Font Awesome
<link>放layui.css前，靠浏览器自然加载时序解决 - 若必须动态判断，可用
document.fonts.load('1em "Font Awesome 6 Free"')，但 IE/旧 Edge 不支持，需 fallback 到检查document.styleSheets是否含对应CSSRule - 特别注意：弹窗
layer.open({ btn: ['<i class="fa fa-check"></i> 确认'] })会被当作纯文本，图标不解析 —— 此时必须用btn2等回调手动构造 DOM
最容易被忽略的是：Layui 表单组件（input、select）内部自动注入的 <i class="layui-icon"></i> 无法被第三方图标替换，强行操作会在 form.render() 时被还原。真要换，得放弃原生组件，用 <div> + <code><input> + 绝对定位图标手动拼。
