如何通过SVG with JavaScript实现Font Awesome菜单图标开闭切换

我懂你遇到的痛点——之前用Web Fonts with CSS模式时，折叠菜单展开显示减号、收起显示加号的逻辑好好的，换成SVG with JavaScript模式就直接失效了。这俩模式的渲染机制差得挺多，咱们来快速搞定它：

问题根源 #

Web Fonts模式是通过CSS伪元素（::before/::after）加载字体图标，你原来的CSS逻辑应该是针对伪元素的类切换来换图标。但SVG with JS模式是动态把<i>标签转换成SVG元素，原来针对伪元素的选择器根本找不到目标，自然就失效了。

解决方案（分3步） #

1. 调整HTML结构

给带子菜单的父项加个标记类（比如has-submenu），同时把图标用Font Awesome的<i>标签写好（SVG JS会自动把它转成SVG）：

<ul id="block-menuprincipal">
  <li class="has-submenu">
    <a href="#">你的菜单标题 <i class="fa-solid fa-plus"></i></a>
    <ul class="submenu">
      <!-- 子菜单内容 -->
    </ul>
  </li>
  <!-- 其他菜单项 -->
</ul>

2. 用JavaScript监听切换事件

直接操作<i>标签的类名，Font Awesome的SVG JS会自动同步更新SVG图标。写个简单的监听逻辑：

// 批量获取所有带子菜单的菜单项
const subMenuItems = document.querySelectorAll('#block-menuprincipal .has-submenu');

subMenuItems.forEach(item => {
  const menuTrigger = item.querySelector('a');
  const toggleIcon = menuTrigger.querySelector('i');
  const subMenu = item.querySelector('.submenu');

  menuTrigger.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认跳转（如果菜单是链接的话）
    // 切换子菜单的显示状态
    subMenu.classList.toggle('active');
    // 核心：切换加号/减号图标类
    toggleIcon.classList.toggle('fa-plus');
    toggleIcon.classList.toggle('fa-minus');
  });
});

3. 补全基础CSS样式

确保子菜单的展开收起样式正常：

/* 默认隐藏子菜单 */
#block-menuprincipal .submenu {
  display: none;
  /* 可以加些你原来的样式，比如缩进、间距 */
}

/* 展开时显示子菜单 */
#block-menuprincipal .submenu.active {
  display: block;
}

/* 给图标加个小间距，更美观 */
#block-menuprincipal .has-submenu a i {
  margin-left: 0.5rem;
}

额外提醒 #

要确保你已经正确引入了Font Awesome的SVG JS脚本（比如用官方的Kit），脚本要放在页面底部或者用defer属性，保证DOM加载完成后再执行图标替换。

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