html - 在带有 attr() 的::before 伪元素内使用 FontAwesome 图标

Question

我正在尝试使用 attr() 在 ::before 伪元素中插入一个 FontAwesome 图标。原始代码更复杂，但是这会让您了解我想要什么:

<div data-background-icon="\f086"></div>

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

https://jsfiddle.net/grutcop8/

它不起作用，而通常的嵌入方式可以正常工作:

div::before {
  content: "\f086";
  font-family: "FontAwesome";
}

有什么我想念的吗？

Answer 1

尝试使用 Unicode

CSS 转义序列仅适用于 CSS 字符串。当您从 HTML 属性(即 CSS 外部)获取 CSS 转义序列时，它将按字面意思读取，而不是解释为 CSS 字符串的一部分。

If you want to encode the character within an HTML attribute, you need to encode it as an HTML entity.

你应该在你的 font-Awesome 图标代码之前添加 "&#x"。即，如果你想使用/f086，那么写成

从这里获取 unicode - https://fortawesome.github.io/Font-Awesome/cheatsheet/

更新

如果您使用的是 fontAwesome 5，请将 font-family: "FontAwesome"; 更改为 font-family: 'Font Awesome 5 Free';

div:before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div data-background-icon='&#xf086;'></div>