必须用layer.open替代layer.alert才能自定义警告图标，因alert硬编码图标且不支持html内容或自定义图片；可选方案为：一、layer.open内联img标签嵌入本地图标；二、css覆盖svg颜色尺寸；三、css替换为表情符号。

要在Layui的layer.alert中替换默认的黄色感叹号警告图标，必须绕过alert的硬编码限制，改用layer.open手动构造弹窗结构，因为alert不支持自定义图标内容或SVG源。

用layer.open完全替代alert并嵌入自定义图标

第一步：准备一个本地图标文件（如alert-icon.png），放在项目static/img/目录下，确保路径可被页面正常访问。

第二步：调用layer.open，将图标通过HTML内联方式写入content参数，同时关闭默认标题栏和按钮栏：
layer.open({ content:'

确定要永久删除吗?

', title: false, btn: [], yes:function(index, layero) { layer.close(index); doDelete(); }, cancel:function(index) { layer.close(index); } });

这一步不能用layer.alert()直接传icon参数——它只接受0-6的内置编号，无法加载自定义图片。强行在alert里加content HTML会被忽略。

用CSS强制覆盖内置SVG图标（仅限微调）

方法一：替换警告图标为红色叹号字符
在全局CSS中添加高权重样式，确保覆盖layui默认规则：
【.layui-layer-content .layui-layer-icon[lay-id="3"]::before { content: "❗"; color: #e74c3c; font-size: 22px; }】

注意：该选择器只对icon: 3（警告类型）生效；若弹窗是icon: 2（失败），需把lay-id改为"2"。

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

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

下载

方法二：调整原生SVG图标的颜色与尺寸
直接覆盖.layui-layer-icon的fill和width属性：
.layui-layer-icon { fill: #c0392b !important; width: 26px !important; height: 26px !important; }

这个方法无需修改JS，但只能改颜色、大小，不能换成任意图标或图片。

验证图标是否生效的关键检查点

① 打开浏览器开发者工具 → Elements面板 → 搜索“.layui-layer-icon” → 查看实际渲染的DOM节点是否包含lay-id属性值，确认当前弹窗使用的icon编号；

② 若使用CSS覆盖方案，检查控制台是否有样式被其他规则拦截，特别是!important是否被更高优先级的CSS覆盖；

③ 【使用layer.open时，务必移除icon参数，否则会与自定义content中的图标冲突，导致显示两个图标】；

④ 图片路径必须为相对路径且相对于当前HTML页面，不是相对于JS文件位置。