Font Awesome图标切换异常：类已切换但fa-angle-right/down图标未更新

我尝试切换Font Awesome的fa-angle-right和fa-angle-down图标，相关代码如下：

JavaScript代码 #

let tagItem = document.getElementById('tag-item'); 
let angleCount = 0; 
const angle = document.getElementById('angle-img'); 
tagItem.addEventListener('click',function(){ 
    if (angleCount %2 === 0) { 
        angle.classList.remove('fa-angle-right'); 
        angle.classList.add('fa-angle-down'); 
    } else { 
        angle.classList.remove('fa-angle-down'); 
        angle.classList.add('fa-angle-right'); 
    } 
    angleCount++; 
    console.log(angle.classList); 
});

HTML代码 #

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<li id="tag-item" class="list-item"> 
    <i class="fa fa-tag"></i><span id="tags">Tags</span><i id="angle-img" class="fa fa-angle-right"></i> 
</li>

控制台日志显示类已按要求切换，但图标并未随之变化，请问如何解决该问题？

解决方案 #

这种情况我之前也碰到过，大概率是下面几个原因，你可以逐一排查：

• 确认Font Awesome资源加载正常
  打开浏览器开发者工具（F12）的「网络」面板，刷新页面后检查font-awesome.min.css是否成功加载（状态码为200）。如果加载失败，建议把CDN地址换成完整的HTTPS格式，避免协议兼容问题：

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

• 排查CSS样式冲突
  有些自定义样式会覆盖Font Awesome的默认字体设置，导致图标无法正常渲染。你可以给目标图标元素强制指定字体：

  #angle-img {
    font-family: 'FontAwesome' !important;
  }
  

  同时检查是否有opacity: 0、display: none这类属性意外隐藏了图标。

• 简化切换逻辑，避免计数错误
  你的计数逻辑容易出现异常（比如页面刷新后计数重置），建议用classList.toggle()直接切换类，代码更简洁可靠：

  let tagItem = document.getElementById('tag-item'); 
  const angle = document.getElementById('angle-img'); 
  tagItem.addEventListener('click',function(){ 
      angle.classList.toggle('fa-angle-right');
      angle.classList.toggle('fa-angle-down');
      console.log(angle.classList); 
  });
  

• 验证图标类名的有效性
  确认你使用的Font Awesome 4.7.0版本确实包含这两个类（fa-angle-right和fa-angle-down在4.7.0中是存在的，但高版本的Font Awesome类名格式会变化，比如5.x需要加fas前缀）。可以在页面单独添加测试标签，看图标是否能正常显示：

  <i class="fa fa-angle-right"></i>
  <i class="fa fa-angle-down"></i>
  

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