如何通过属性设置伪元素的图标内容？ [复制]

Question

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

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

但使用attr(data-icon) 似乎无法将内容识别为字符集。

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

#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（规范称为“十进制字符引用”或“十六进制字符引用；”details here）。

十六进制字符引用（注意# 后面的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>