如何通过data属性与:before伪元素为元素绑定iconfont图标

异常根因 #

你遇到的渲染异常本质是CSS转义规则的生效边界问题：

• 你在data-icon属性中写入的\EA46，在HTML解析阶段会被当作纯文本字符串存储，不会触发任何转义逻辑
• CSS的反斜杠转义规则，仅作用于CSS源码本身书写的字面量内容，不会对attr()函数从DOM中读取到的外部字符串做二次解析
• 伪元素content: attr(data-icon)拿到的就是纯文本形式的\EA46，CSS不会将字符串中的反斜杠识别为转义标识，因此最终会直接把这串字符作为普通文本渲染到页面上

可行实现方案 #

方案1：HTML属性直接使用Unicode实体值 #

不需要额外JS逻辑，只需要修改HTML中data-icon的写入值即可：
把原来的data-icon="\EA46"替换为HTML实体写法的data-icon=""，浏览器在解析HTML阶段就会自动把这个实体转换为对应的Unicode字符，此时原有CSS代码不需要做任何修改，即可正常渲染iconFont图标。

原有保持不变的CSS代码：

.testicon {
  font-family: iconFont;
}

[data-icon]:before {
  content: attr(data-icon);
}

修改后的HTML结构：

<span class="testicon" data-icon="&#xEA46;"></span>

方案2：通过JS动态转义字符写入CSS变量 #

如果希望HTML中只存储纯十六进制图标编码（不带反斜杠、不带实体标记），可以借助JS完成字符转换，配合CSS自定义属性驱动伪元素内容渲染：

1. 修改CSS代码，用自定义变量承接伪元素的content值：

.testicon {
  font-family: iconFont;
}

[data-icon]:before {
  /* 读取元素上的自定义变量作为content值 */
  content: var(--icon-content, '');
}

2. HTML中直接存储纯十六进制编码值：

<span class="testicon" data-icon="EA46"></span>

3. 增加极短的JS逻辑完成编码转义：

document.querySelectorAll('[data-icon]').forEach(el => {
  // 读取data属性中的纯编码值
  const codeStr = el.dataset.icon.trim();
  // 将十六进制编码转换为对应的真实Unicode字符
  const iconChar = String.fromCodePoint(`0x${codeStr}`);
  // 将转义后的字符作为字符串写入元素的自定义CSS变量
  el.style.setProperty('--icon-content', `"${iconChar}"`);
})

注意事项 #

• 不要尝试在CSS中通过手动拼接反斜杠的方式实现转义（比如写content: "\\" attr(data-icon)），这种写法拼接出的依然是纯字符串，无法触发CSS的Unicode转义逻辑
• 确保页面引入的iconFont字体的@font-face声明中，对应图标的码点和你使用的编码值完全匹配，避免字体绑定失败导致的渲染异常

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