通过dataset设置::before伪元素Font Awesome图标失效如何解决

• CSS里写的content: '\f0c2'是CSS原生支持的Unicode转义语法，浏览器解析CSS规则时会自动把\f0c2转换成Font Awesome图标映射的特殊Unicode字符，匹配到FA字体文件后就能正常渲染出图标。
• 用content: attr(data-content)的时候，浏览器拿到的是DOM属性里存的纯原始文本：不管你是在HTML标签上硬写data-content="\f0c2"，还是JS里赋值'\\f185'，最后存在属性里的都是字面量的\f0c2/\f185字符串，不会走CSS的转义流程，当然只会显示原始的字符串文本，出不来图标。

如果你想继续用dataset传值+attr读取的方案，只要保证传给data属性的是真实的Unicode字符，而不是带反斜杠的转义字符串就行。JS里可以直接用String.fromCodePoint()传入图标对应的十六进制码点，生成对应的字符赋值：

const element = document.querySelector('.data');
const btn = document.querySelector('.btn');

// 初始化默认图标，对应码点0xf0c2
element.dataset.content = String.fromCodePoint(0xf0c2);

const changeIcon = () => {
  // 切换为目标图标，对应码点0xf185
  element.dataset.content = String.fromCodePoint(0xf185);
}

btn.addEventListener('click', changeIcon);

注意：HTML标签上硬写的data-content="\f0c2"不会自动转成对应Unicode字符，初始值建议通过JS赋值，避免第一次加载就显示异常。

实际开发里不建议硬记图标码点走attr传值，下面两种方案坑更少、维护起来更方便：

• 方案1：用CSS变量传值（保留伪元素实现）
  不用绕dataset，直接把伪元素的content绑定到CSS变量，JS动态修改变量值就行，转义逻辑更简单不容易错：

  /* 对应CSS修改 */
  .data::before {
    content: var(--fa-icon, "\f0c2");
  }
  

  const changeIcon = () => {
    // 直接给元素设置CSS变量值即可
    element.style.setProperty('--fa-icon', '"\\f185"');
  }
  

• 方案2：切换Font Awesome原生class（官方推荐，零转义问题）
  完全不用管码点、伪元素、转义这些逻辑，直接在元素里插FA自带的图标标签，切换的时候改class名就行，可读性最高也最不容易出问题：

  <!-- 对应HTML修改 -->
  <h2 class='element data icon-before'>
    <i class="fa-solid fa-cloud"></i>
    动态切换图标
  </h2>
  

  const changeIcon = () => {
    const iconEl = element.querySelector('i');
    // 直接替换图标class即可，fa-cloud对应原来的f0c2云图标，fa-sun对应f185太阳图标
    iconEl.classList.replace('fa-cloud', 'fa-sun');
  }
  

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