layui 2.8 不支持直接加载自定义图标字体，需手动引入 iconfont.css 并确保路径正确、前缀独立；表单/弹窗等组件内不可直接替换图标，应采用容器包裹+手动布局+CSS 定位方式实现，避免与 layui 渲染逻辑冲突。
layui 2.8 怎么加载自定义图标字体文件
layui 2.8 默认仍用 iconfont 的旧版 css 引入方式，不支持直接通过 layui.use('icon') 加载第三方图标库。它本身没内置图标模块的动态注册机制，所谓“新图标库扩展”，本质是绕过默认图标逻辑，手动接管 class 解析和字体文件加载。
常见错误现象：<i class="layui-icon layui-icon-home"></i> 能显示，但换成 <i class="iconfont icon-home"></i> 就空白；或者图标显示为方块、乱码。
- 确保你的第三方图标 CSS 文件（如
iconfont.css）已正确引入，且在layui.css之后加载 - 字体文件路径必须和 CSS 中
@font-face声明里的src匹配，相对路径容易出错，建议用绝对路径或检查浏览器 Network 面板确认字体是否 404 - 避免和 layui 自身的
layui-icon类名冲突，第三方图标务必使用独立前缀（如icon-xxx），不要覆盖.layui-icon - 如果用了 webpack/vite 构建，注意字体文件是否被正确拷贝到输出目录，
url(...)在 CSS 里可能被重写失效
layui 2.8 表单元素里怎么用自定义图标代替默认图标
layui 的 input、select、checkbox 等组件内部会自动插入 <i class="layui-icon"></i>，你无法直接替换它的 class。强行改 class 或 JS 注入，会在 layui 重渲染（如 form.render()）时被还原。
正确做法是：放弃在原生组件内塞第三方图标，改用「容器包裹 + 手动布局」的方式模拟。
- 用
<div class="layui-input-inline"> 包住一个普通 <code><input>和一个独立的<i class="iconfont icon-search"></i> - 通过 CSS 控制图标位置（
position: absolute）、大小（font-size）、颜色（color），并适配 layui 输入框的 padding 和 line-height - 禁用 layui 对该 input 的自动图标处理：初始化时不要给它加
lay-key或lay-filter，也不要让它被form.render()扫描到 - 对
layer.open()，设btn: ['<i class="iconfont icon-ok"></i> 确定', '<i class="iconfont icon-close"></i> 取消']，再配合content里用layui-btn样式手动写按钮结构 - 对普通按钮，别依赖
lay-submit，改用<button type="button" class="layui-btn"><i class="iconfont icon-save"></i> 保存</button>，然后用 jQuery 或原生addEventListener绑定事件 - 注意图标字体的
vertical-align，常需设为middle或-2px才能和文字对齐 - layui 2.8 没暴露图标渲染钩子（如
iconRender选项），也没有类似 Vue 的 scoped slot 机制 - 所有基于 MutationObserver 的 hack 方案，在 table 的
reload()或 form 的reset()后都会失效 - 最稳的路径就是「不碰 layui 的图标逻辑，只管好自己的容器和样式」——这听起来麻烦，但省去后期无限 debug 的时间
layui 2.8 的弹窗/按钮等组件里图标不生效怎么办
像 layer.open() 的 btn 数组、button 按钮的 lay-submit 触发器，它们内部图标都是硬编码为 layui-icon 类名的。你传入 <i class="iconfont icon-close"></i> 会被当作纯文本插入，不会解析 HTML。
解决的关键是：**不让 layui 生成图标，自己控制整个按钮内容**。
为什么 layui 2.8 不推荐用 JS 动态替换图标 class
有人试过用 document.querySelectorAll('.layui-icon') 批量替换 class，或监听 DOM 变化做 patch。短期看似可行，但极易崩坏。
原因很实在：layui 的很多组件（如 table、tree、carousel）会在内部重绘 DOM，且不触发标准事件。你刚改完，下一次排序、分页、折叠就全回退了。
真正卡点在于字体文件加载时机和 CSS 优先级。哪怕图标 class 写对了，只要字体还没加载完或被其他 font-family 覆盖，就会显示为空白或系统默认符号。这点最容易被忽略。
