菜单折叠/展开图标切换问题：Font Awesome 5升级后失效咨询

我之前升级FA5的时候也踩过这个坑！主要是Font Awesome 5和旧版本在类名规则、渲染逻辑上有不少变化，咱们一步步排查解决：

1. 先修正图标类名（最常见的问题） #

FA5把图标分成了不同的样式分组（Solid/Regular/Light等），每个分组对应专属的前缀类：

• 你要用的plus-circle和minus-circle属于Solid样式，必须加上fas前缀，而不是旧版本的fa前缀。
  ❌ 错误写法：<i class="fa fa-plus-circle"></i>
  ✅ 正确写法：<i class="fas fa-plus-circle"></i>

2. 调整JS切换逻辑 #

根据你使用的FA5渲染方式（Web Font/SVG），调整切换代码：

场景1：使用Web Font版本的FA5（最常用） #

<!-- HTML结构 -->
<button id="menu-toggle">
  <i class="fas fa-plus-circle"></i> 菜单
</button>

// JS切换逻辑
const menuToggle = document.getElementById('menu-toggle');
const menuIcon = menuToggle.querySelector('i');

menuToggle.addEventListener('click', () => {
  // 这里写你的菜单折叠/展开逻辑（比如切换菜单的display属性）
  // ...

  // 切换图标类
  menuIcon.classList.toggle('fa-plus-circle');
  menuIcon.classList.toggle('fa-minus-circle');
});

场景2：使用SVG版本的FA5（动态渲染图标） #

如果是用FA5的JS脚本加载SVG图标，直接修改类名后需要手动触发刷新——因为SVG是动态生成的DOM元素，类名变化不会自动更新图标：

const menuToggle = document.getElementById('menu-toggle');
const menuIcon = menuToggle.querySelector('svg');

menuToggle.addEventListener('click', () => {
  // 菜单折叠/展开逻辑
  // ...

  // 切换图标并刷新
  if (menuIcon.classList.contains('fa-plus-circle')) {
    menuIcon.classList.replace('fa-plus-circle', 'fa-minus-circle');
  } else {
    menuIcon.classList.replace('fa-minus-circle', 'fa-plus-circle');
  }
  // 关键：强制刷新FA图标
  FontAwesome.refresh();
});

3. 确认FA5资源引入正确 #

确保你引入了包含Solid样式的FA5资源：

• Web Font版本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

• SVG版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>

如果以上步骤都试过还是不行，可以检查浏览器控制台有没有资源加载错误，或者类名被其他CSS覆盖的情况~

内容的提问来源于stack exchange，提问作者1ad9ac48