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');