Font Awesome图标切换失效求助：无法替换fa-meh-blank为fa-smile-wink

架构老林

2026-6-26

问题分析与解决思路

问题根源

你的代码只对fa-smile-wink类做了切换操作，但完全没处理初始的fa-meh-blank类。第一次点击图标时，元素会同时拥有fa-meh-blank和fa-smile-wink两个Font Awesome图标类——而Font Awesome在这种情况下，会根据CSS中类定义的加载顺序优先级来显示图标，导致你看不到预期的切换效果。

当你“调换顺序”操作时，实际上是先移除了fa-meh-blank再添加fa-smile-wink，避免了两个图标类共存的冲突，所以功能正常。

解决方案

方案1：同时切换两个图标类

直接对初始类fa-meh-blank也执行toggle操作，确保每次点击后元素只会保留其中一个图标类：

const icone = document.querySelector("i");
console.log(icone);

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  icone.classList.toggle('happy');
  icone.classList.toggle('fa-meh-blank'); // 新增：切换初始图标类
  icone.classList.toggle('fa-smile-wink');
});

方案2：明确控制类的添加/移除

如果需要更严格的状态控制（避免toggle可能带来的意外状态），可以用条件判断来手动管理类：

const icone = document.querySelector("i");
console.log(icone);

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  icone.classList.toggle('happy');
  
  if (icone.classList.contains('fa-smile-wink')) {
    // 当前是笑脸，切换回无表情
    icone.classList.remove('fa-smile-wink');
    icone.classList.add('fa-meh-blank');
  } else {
    // 当前是无表情，切换成笑脸
    icone.classList.remove('fa-meh-blank');
    icone.classList.add('fa-smile-wink');
  }
});