Layui弹出层标题插入图标需关闭默认title并用content自定义HTML结构，手动构建带layui-icon类的layui-layer-title容器。
弹出层标题里怎么插入图标
layui 的 layer.open() 默认只支持纯文本标题，想在标题里加图标（比如 ⚠️、✅ 或 font awesome 图标），不能靠 title 字符串硬拼——因为 layer 会自动对 html 转义，直接写 <i class="fa fa-info"></i> 会被当普通文本显示。
用 content 自定义整个弹层结构
真正可控的方式是放弃默认标题，改用 content 传入完整 HTML 片段，并手动构造带图标的标题栏。此时需关闭默认标题：title: false，再在内容里补上带图标的 <div class="layui-layer-title">。
常见做法：
-
title: false关闭原生标题 -
content传一个<div>，里面包含自定义标题行 + 主体内容 - 图标可用 Unicode（如
?）、内联 SVG 或已加载的字体图标（如<i class="layui-icon layui-icon-success"></i>） - 注意：自定义标题需手动加
class="layui-layer-title"才能复用 layer 原有样式
示例：
layer.open({
type: 1,
title: false,
content: '<div><div class="layui-layer-title"><i class="layui-icon layui-icon-alert"></i> 确认删除？</div><div style="padding:20px;">该操作不可撤销</div></div>',
area: ['400px', 'auto']
});
动态图标依赖数据时怎么拼接
如果图标要根据后端返回状态切换（比如 success / error / warn），别在字符串里硬写三目，容易漏转义或结构错乱。推荐先构建 DOM 片段再传入：
- 用 JS 拼接字符串时，确保图标部分不被双引号/单引号截断，建议用模板字符串
- 若图标来自变量（如
iconType = 'success'），映射关系提前定义好，避免运行时拼错 class - 不要在
content里写onclick行内事件——layer 会销毁 DOM，事件丢失；改用success回调里绑定
简例：
const iconMap = {
success: 'layui-icon-ok',
error: 'layui-icon-close',
warn: 'layui-icon-dialog'
};
const iconClass = iconMap[type] || 'layui-icon-help';
layer.open({
title: false,
content: `
<div>
<div class="layui-layer-title">
<i class="layui-icon ${iconClass}"></i> ${titleText}
</div>
<div class="layui-layer-content">${bodyHtml}</div>
</div>
`,
success: function(layero) {
// 此处可给内部按钮绑定事件
}
});
为什么不用 skin 或 CSS 伪元素
有人试过用 skin: 'my-skin' 配合 CSS ::before 给标题加图标，但实际行不通——因为 layer 生成的标题 DOM 是动态插入的，且 class 名固定为 layui-layer-title，但它的文本内容是纯 textNode，无法用伪元素“在文字前加图标”并保持对齐。更麻烦的是，不同 layer 类型（page、iframe）的标题结构不一致，伪元素容易错位或失效。
所以绕开 layer 标题渲染逻辑，自己控 DOM 是最稳的路。唯一代价是多写几行 HTML 字符串，但换来的是完全可控和可维护。
真正容易被忽略的点：自定义标题里如果用了 <i> 图标，务必确认对应图标字体（如 layui-icon）已在页面全局加载；否则图标位置只留空白方块，且控制台无报错。
