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

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（规范称为 "decimal character reference" 或 "hexadecimal character reference;" details here）。

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

data-icon="&#xE92C;"

十进制（无x）：

data-icon="&#59692;"

实例：

#expected::before {
  content: '[=12=]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>From <code>data-icon</code></h2>
<a class="button" data-icon="&#xE92C;" href="javascript: void(0)">Save</a>

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

How to set icon content of pseudo element by its attribute?

html

css

icomoon