如何将HTML.conf_status列内容作为类名替换为Font Awesome图标

你不需要修改第三方生成的源HTML，通过动态读取状态列文本、附加对应CSS类的方式，就能完全复用你已经写好的图标样式，具体实现如下：

核心实现逻辑 #

• 遍历所有状态列.conf_status单元格，提取其中的文本值（也就是zg/lo这类状态标识）
• 给单元格同时添加通用图标类icon和对应状态类（lo/zg），触发你已经定义的Font Awesome伪元素图标样式
• 清空单元格原本的文本内容，避免状态文字和图标重叠显示

代码实现 #

现有CSS不需要改动 #

你写的CSS逻辑完全可用，只要保证两个类共存时样式能正确合并即可，保持原代码即可：

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: initial;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  color: maroon;
}

.lo::before { content: '\f7b6'; } 
.zg::before { content: '\f7f6'; }

补充JavaScript脚本 #

将这段代码放在页面的脚本逻辑中，在DOM结构加载完成后执行即可：

// 等待DOM完全加载后再操作表格，避免元素未找到
document.addEventListener('DOMContentLoaded', () => {
  // 选中确认表中所有的状态单元格
  const statusNodes = document.querySelectorAll('.confirmationtable .conf_status');
  statusNodes.forEach(node => {
    // 提取状态值，去除前后多余的空白字符
    const statusKey = node.textContent.trim();
    // 仅处理已知的有效状态，避免添加无效类名
    if (['zg', 'lo'].includes(statusKey)) {
      // 附加通用图标类和对应状态类
      node.classList.add('icon', statusKey);
      // 清空原有状态文本，防止和图标重叠
      node.textContent = '';
    }
  });
});

特殊场景适配 #

如果你的第三方表格是异步动态渲染的（即页面初始加载时不存在表格，后续延迟插入DOM），可以做两种调整：

• 将上面的遍历逻辑封装为独立函数，在表格渲染完成的回调中手动调用
• 搭配MutationObserver监听表格容器的DOM变化，自动对新增的状态单元格执行上述处理逻辑，不需要手动触发

注意事项：请确保Font Awesome 5 Pro的字体资源已正常引入加载，否则图标会显示为占位符或乱码。

内容的提问来源于stack exchange，提问作者Dirk Albrecht