如何实现点击时切换Font Awesome图标？现有代码运行无效求解决

问题排查点 #

• 多类名操作写法错误
  原生classList的remove、add方法不支持传入空格分隔的多类名字符串，必须将每个类名作为单独参数传入。你代码里icon.classList.remove('far fa-moon')的写法相当于尝试删除一个名为far fa-moon的类，操作自然无效。
• DOM加载顺序问题
  如果你的script标签写在<head>里，或者放在id为icon的元素前面，执行document.getElementById("icon")时元素还没渲染完成，拿到的是null，事件绑定根本不会生效。
• Font Awesome渲染模式问题
  如果你用的是JS版Font Awesome（会自动把<i>标签渲染成SVG的模式），渲染完成后原来的<i>标签会被直接替换成svg元素，你绑定事件的DOM对象和实际页面渲染的元素不是同一个，修改类名自然无效。
• 版本不匹配问题
  Font Awesome 5和6的类名规则有差异，比如免费版的常规样式前缀在部分版本里是fa-regular而非far，也可能是你用到的图标不在你引入的版本的免费权限范围内。

修正后代码示例 #

// 等待DOM全部加载完成再执行代码
document.addEventListener('DOMContentLoaded', function() {
  var icon = document.getElementById("icon");
  // 元素不存在则直接终止，避免控制台报错
  if (!icon) return;
  icon.onclick = function(){
    document.body.classList.toggle("darkTheme");
    if(document.body.classList.contains("darkTheme")){
      // 多类名分开作为参数传入
      icon.classList.remove('far', 'fa-moon');
      icon.classList.add('fas', 'fa-sun', 'fa-lg');
      localStorage.setItem("theme", "dark");
    } else {
      icon.classList.remove('fas', 'fa-sun', 'fa-lg');
      icon.classList.add('far', 'fa-moon');
      localStorage.setItem("theme", "light");
    }
  }
});

如果使用的是JS版SVG渲染的Font Awesome，建议切换为CSS版引入方式，稳定性更高；也可以在引入Font Awesome的JS资源前添加配置<script>FontAwesomeConfig = { autoReplaceSvg: 'nest' }</script>，保留原有<i>标签的结构。

内容的提问来源于stack exchange，提问作者Y A