layui switch 的 icon 不能直接替换，因其由 CSS 伪元素 ::before/::after 通过 Unicode（如 \e605）绘制，需覆盖对应 content 值并确保字体加载；强行插入 SVG 或 class 需重写结构且失去 Layui 表单能力。
layui switch 的 icon 不能直接替换，因为它是伪元素绘制的
layui 的 switch 不是靠 实现的，底层用的是 CSS 伪类 ::before 和 ::after 绘制圆点与轨道，图标（如对勾、叉）是通过 content: "\e605" 这类 Unicode 字符插入的。你无法在 HTML 里写一个 塞进去 —— DOM 根本不渲染它。
真正可改的是开关两侧的文字和内部 Unicode 图标
开关“内部”那个小图标的本质，就是 lay-skin="switch" 对应的 CSS 规则里定义的 content 值。Layui 默认用的是 \e605（对勾）和 \e61c（叉），但你可以覆盖它们：
- 找到或添加如下 CSS（必须比 layui.css 后加载）：
.layui-form-switch[lay-skin="switch"] .layui-form-switch-inner::before { content: "\e642" !important; /* 替换为任意 layui-icon 的 Unicode，比如刷新图标 */ } .layui-form-switch[lay-skin="switch"] .layui-form-switch-inner::after { content: "\e60b" !important; /* 可选：替换关闭态图标，比如 × */ } - 确保你用的 Unicode 确实在项目加载的图标字体中存在（比如
\e642是layui-icon-refresh，需确认layui.css或自定义字体已包含） - 不要改
.layui-form-switch-inner的尺寸或定位逻辑，否则轨道/圆点错位
想用 SVG 或自定义字体图标？得重写整个 switch 结构
如果硬要塞进 SVG 或 iconfont 类名（比如 icon-weixin），Layui 原生不支持。你只能放弃 lay-skin="switch"，改用纯 CSS 实现开关，并手动绑定 form.on('checkbox(...)') 来模拟行为：
- HTML 写成：
<input type="checkbox" name="customSwitch" lay-filter="customSwitch"><span class="custom-switch-track"><span class="custom-switch-thumb"></span></span>
- 用 background-image 或
::before插入你的 SVG / 字体图标 - 监听
form.on('checkbox(customSwitch)')，手动更新.custom-switch-thumb的 class 或 content - 注意：这样就脱离了 Layui 表单校验、
form.val()自动取值等能力，得自己补全
最容易踩的坑：Unicode 错位、字体未加载、CSS 优先级不足
改完没效果？先盯住这三点：
- 浏览器控制台 Elements 面板里检查
.layui-form-switch-inner::before是否被覆盖，computed 中content值是否是你设的 Unicode - Network 面板看
iconfont.woff2或layui/font/iconfont.eot是否 404 —— 字体没加载，Unicode 就是方块 - 加
!important是临时解法，长期建议把自定义 CSS 放在 layui.css 之后、且避免用太宽泛的选择器（比如直接写i会污染所有图标）
真正稳定的做法不是“换图标”，而是接受它作为状态视觉符号的本质 —— 用颜色、大小、文字说明来传递语义，比强行塞图标更可靠。
