html - 如何通过属性设置伪元素的图标内容？

Question

我正在使用 icomoon 作为我的图标库

我正在尝试通过属性动态设置图标data-icon。

但似乎无法将内容识别为使用attr(data-icon).

有没有办法\e92c使用字符而不是字符串文字attr()？

#expected::before {
  content: '\e92c';
  font-family: 'icomoon';
}

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'icomoon';
}

<h2>This is what I expected</h2>
<a class="button" id="expected" href="javascript: void(0)">Save</a>

<h2>This is what I get :(</h2>
<a class="button" data-icon="\e92c" href="javascript: void(0)">Save</a>

Answer 1

HTML 文本与 CSS 文本的转义方式不同。在属性中，您需要等效的十六进制 excape（规范称为“十进制字符引用”或“十六进制字符引用；”此处详细说明）。

十六进制字符引用（注意x之后的#）：

data-icon=""

十进制（否x）：

data-icon=""

现场示例：

#expected::before {
  content: '\00e92c';
  font-family: 'icomoon';
}

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'icomoon';
}

<h2>This is what I expected</h2>
<a class="button" id="expected" href="javascript: void(0)">Save</a>

<h2>From <code>data-icon</code></h2>
<a class="button" data-icon="&#xE92C;" href="javascript: void(0)">Save</a>