layer.confirm无法直接添加标题图标，因title参数仅支持字符串且会自动转义；可行方案是用layer.open手动构建，通过content传入含图标的HTML结构，完全控制标题区域。
layer.confirm 默认没有标题图标，所谓“修改”其实是替换整个 title 区域
很多人搜“修改标题图标”，实际是想让 layer.confirm 弹窗左上角显示一个自定义图标（比如警告、问号、感叹号），但原生 layer.confirm 的 title 参数只接受字符串或 false，不支持传入 HTML。所谓“加图标”，本质是用 content 自定义整个弹窗结构，放弃默认 title 栏。
-
layer.confirm底层调用的是layer.open，它本身不提供 icon 配置项；layer.msg/layer.alert里的小图标是内置样式控制的，confirm没有这层封装 - 如果你强行在
title里写 HTML（如title: '<i class="layui-icon">⚠️</i> 确认删除'），Layui 会自动转义，显示为纯文本 - 真正可行的方式：用
layer.open手动构造一个 confirm 风格的弹窗，自己写 DOM 结构
用 layer.open 模拟 confirm 并添加自定义图标
这是最稳定、可控的方式。你保留确认/取消按钮逻辑，同时完全掌控 title 区域的 HTML 内容。
- 设置
type: 1（页面层），area控制宽高，btn显式声明按钮文字 -
content传入带图标的 HTML 字符串，例如：<div class="layui-layer-title"><i class="layui-icon"></i> 删除操作</div><div class="layui-layer-content">确定要删除这条记录吗？</div> - 注意：Layui 的
.layui-layer-title样式默认有 padding 和 border-bottom，直接复用能保持视觉一致 - 按钮回调里手动调用
layer.close(index)，别依赖yes回调的默认行为
layer.open({
type: 1,
title: false, // 关闭默认 title
area: ['400px', 'auto'],
content: '<div class="layui-layer-title"><i class="layui-icon"></i> 删除操作</div><div class="layui-layer-content">确定要删除这条记录吗？</div>',
btn: ['确定', '取消'],
yes: function(index) {
// 执行删除逻辑
console.log('用户点了确定');
layer.close(index);
},
btn2: function(index) {
layer.close(index);
}
});
为什么不用 skin + CSS 覆盖？容易失效
有人试图用 skin 加自定义 class，再通过 CSS 在 .layui-layer-title::before 插入图标——这在部分版本会生效，但极不稳定。
- Layui 2.8+ 对 title 渲染做了优化，
.layui-layer-title可能被动态替换或包裹，伪元素易丢失上下文 - 不同主题（比如
layui-layer-molv）下 class 名或结构微调，CSS 规则需要重复适配 - 移动端 viewport 缩放时，图标尺寸和对齐常错位，不如内联 HTML 可控
- 如果项目已引入 Font Awesome 或其它图标库，混用图标字体还可能触发字体加载竞争
兼容性与性能提醒
自定义 content 方案看似多写几行，其实更轻量——它绕过了 Layui 对 confirm 的内部 title 处理逻辑，减少一层 DOM 重绘。
- 不要在
content中写复杂 Vue/React 组件，Layui 不接管生命周期，容易内存泄漏 - 如果需频繁调用，建议封装成函数，把图标 Unicode（如
）、文案、按钮文字都作为参数传入 - Layui 3.0 尚未正式发布，当前主流仍是 2.x，该方案在 2.7 ~ 2.8.20 全系验证可用
真正卡住人的不是怎么加图标，而是没意识到 layer.confirm 的 title 是个“黑盒”——它不开放 DOM 注入入口。一旦想改结构，就得换底层 API。
