jQuery动态设置data-before实现Glyphicons图标显示失败问题

你遇到的核心问题是：在HTML中直接写&#xE251时，浏览器会自动将这个HTML实体解析为对应的Unicode字符，但通过jQuery的attr()方法设置属性时，传入的字符串不会被浏览器二次解析，所以最终data-before属性里存的是实体字符串本身，而非实际的图标字符。

错误原因拆解 #

你之前的几种写法都是把&#xE251或者转义后的字符串直接传给data-before，比如：

• icon.attr('data-before', '&#x' + icoList); 会让属性值变成&#xE251，浏览器不会再解析这个实体，CSS的content拿到的就是这个字符串，自然显示不出图标。
• 其他带反斜杠的写法要么语法错误，要么只是把反斜杠和十六进制码当成普通字符输出，同样无法转换成图标对应的Unicode字符。

正确的实现方式 #

我们需要把十六进制的图标代码E251转换成实际的Unicode字符，再设置到data-before属性中。可以用JavaScript的String.fromCharCode()方法，它能根据Unicode码点（十进制或十六进制）生成对应的字符。

修正后的代码如下：

var icoList = 0xE251; // 直接用十六进制数值，或者先转成十进制：parseInt('E251', 16)
var icon = $('ul > li:has(ul)', $this);
icon.addClass('icon');
icon.attr('data-before', String.fromCharCode(icoList));

如果icoList必须是字符串形式的'E251'，可以先转成十六进制数值再处理：

var icoList = 'E251';
var icon = $('ul > li:has(ul)', $this);
icon.addClass('icon');
// 把十六进制字符串转成数值，再生成对应字符
var iconChar = String.fromCharCode(parseInt(icoList, 16));
icon.attr('data-before', iconChar);

验证逻辑 #

当你用String.fromCharCode(0xE251)生成字符后，data-before属性里存储的就是Glyphicons对应图标的实际Unicode字符，CSS的content: attr(data-before)会直接读取这个字符，再结合font-family: "Glyphicons Halflings"，就能正常渲染出图标——这和你在HTML中直接写data-before="&#xE251"的效果完全一致，因为浏览器最终都会把实体解析成相同的Unicode字符。

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