Font Awesome 图标无法切换，通常是因为未显式移除旧图标类（如 fa-meh-blank），仅添加新类（如 fa-smile-wink）会导致两者共存，而 Font Awesome 6+ 的图标渲染依赖于唯一且互斥的图标类。正确做法是使用 classList.toggle() 配对切换，或用 replace() 精准替换。
font awesome 图标无法切换，通常是因为未显式移除旧图标类（如 fa-meh-blank），仅添加新类（如 fa-smile-wink）会导致两者共存，而 font awesome 6+ 的图标渲染依赖于唯一且互斥的图标类。正确做法是使用 classlist.toggle() 配对切换，或用 replace() 精准替换。
在 Font Awesome 6 中，图标由特定的图标类（如 fa-meh-blank、fa-smile-wink）驱动，这些类必须互斥存在——同一元素上同时包含两个图标类时，Font Awesome 会按 CSS 优先级或内部逻辑选择其一（常为前者），导致视觉无变化。你原始代码中仅调用 icone.classList.toggle('fa-smile-wink')，但未移除 fa-meh-blank，因此两个类并存，图标仍显示为“空白表情”。
✅ 正确解决方案有以下两种推荐方式：
方式一：成对 toggle（推荐用于状态切换）
适用于“开心 ↔ 不开心”等双向切换场景，需确保初始类与目标类一一对应：
const icone = document.querySelector("i");
icone.addEventListener('click', function() {
console.log('icône cliqué');
// 显式切换两个互斥图标类
icone.classList.toggle('fa-meh-blank');
icone.classList.toggle('fa-smile-wink');
});
⚠️ 注意：此方式要求元素初始必须包含 fa-meh-blank（如你的 HTML 中 <i class="far fa-meh-blank"></i>），否则首次点击会错误地添加它而非替换。
方式二：精准 replace（更健壮，推荐通用场景）
直接替换图标类，不依赖当前状态，语义清晰、容错性强：
const icone = document.querySelector("i");
icone.addEventListener('click', function() {
console.log('icône cliqué');
// 安全替换：将 fa-meh-blank 替换为 fa-smile-wink（忽略大小写和前缀）
icone.classList.replace('fa-meh-blank', 'fa-smile-wink');
});
? 补充说明：
- Font Awesome 6 使用
far（Free Regular）前缀表示常规图标字体，fa-meh-blank和fa-smile-wink均属 Regular 风格，无需切换前缀； - 若需支持更多图标（如 solid 版本），请确认 CDN 引入的是完整版（
all.min.css已满足）； - 开发时建议添加
console.log(icone.classList)辅助调试，验证类名变更是否生效。
总结：图标切换失败的本质是类名管理缺失，而非事件或选择器问题。始终遵循“移除旧类 + 添加新类”或直接 replace() 的原则，即可确保 Font Awesome 图标响应式更新。
