如何在JavaScript切换暗黑/亮色模式的按钮中显示Font Awesome图标

我明白你现在的困扰——Font Awesome图标在HTML里能正常显示，但放到JS脚本里就失效，这大概率是因为你用了innerText的缘故：它不会把你写的HTML字符串解析成实际的DOM元素，而是直接把<i class="fa-solid fa-sun"></i>这类内容当成纯文本输出，自然就看不到图标了。

结合你已有的代码和场景，这里有两种可行的解决办法：

方法一：用innerHTML替代innerText #

innerHTML会把字符串当作HTML代码解析，刚好能满足我们插入Font Awesome图标的需求。注意可以用模板字符串（反引号`包裹）来避免引号转义的麻烦：

function updateButton({ buttonEl, isDark }) {
  const ariaCta = isDark ? "Change to light theme" : "Change to dark theme";
  // 用模板字符串编写图标HTML，无需转义双引号
  const buttonIcon = isDark ? `<i class="fa-solid fa-sun"></i>` : `<i class="fa-solid fa-moon"></i>`;
  
  buttonEl.setAttribute("aria-label", ariaCta);
  // 用innerHTML替代innerText，让浏览器解析HTML标签
  buttonEl.innerHTML = buttonIcon;
}

这种方法简单直接，因为你的图标标签是固定的，不存在用户可控的动态内容，所以不用担心XSS安全风险。

方法二：直接创建DOM元素（更推荐的最佳实践） #

如果想更规范地操作DOM，也可以直接创建<i>元素并添加到按钮中，这种方式更安全，也更符合JS操作DOM的标准流程：

function updateButton({ buttonEl, isDark }) {
  const ariaCta = isDark ? "Change to light theme" : "Change to dark theme";
  // 根据主题状态确定图标类名
  const iconClassName = isDark ? "fa-solid fa-sun" : "fa-solid fa-moon";
  
  buttonEl.setAttribute("aria-label", ariaCta);
  // 先清空按钮内的现有内容
  buttonEl.innerHTML = '';
  // 创建图标元素
  const iconElement = document.createElement('i');
  // 给图标元素添加Font Awesome的类
  iconElement.className = iconClassName;
  // 将图标添加到按钮中
  buttonEl.appendChild(iconElement);
}

这种方法的优势是完全避免了HTML字符串拼接的问题，后续如果需要修改图标属性（比如添加额外类、自定义内容），也会更灵活。

另外要确认一下：你的WordPress插件已经正确加载了Font Awesome的Solid样式库，fa-solid fa-sun和fa-solid fa-moon这些类名是有效的——从你说HTML里能显示图标来看，这部分应该是没问题的。

备注：内容来源于stack exchange，提问作者Raoul Unger