javascript - 使用 JavaScript 设置元素数据图标

Question

我的 HTML 中有以下按钮元素

<button id="play-pause" aria-hidden="true"></button>

在 jQuery 就绪事件上，我运行以下代码：

$('#play-pause').attr('data-icon', '')

这会将 HTML 元素变成这个

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

在浏览器中呈现如下（Chrome 稳定版）：

但是，如果我删除 JavaScript 代码，手动将 HTML 更改为以下内容（这与 JS 所做的相同）并刷新页面：

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

然后它呈现如下：

有什么不同？

我怀疑这无关紧要，但这是CSS：

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: '45sound';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style:normal;
}

Answer 1

使用 Unicode 值：

$('#play-pause').attr('data-icon', '\uE00A');