在带有 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，那么写 &#xf086 而不是

从这里获取 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>

Answer 2

CSS 将 \f086 读取为字符串而不是转义序列。修复方法是直接在 content: '\f086'; 等内容属性中使用它，或者直接在 HTML 属性中复制和粘贴图标（确保将文件保存为 UTF-8）

HTML:

<div data-background-icon=""></div> <!-- this is the bluetooth icon copied from fontawesome -->

CSS:

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

或使用 HTML 个实体：

HTML:

<div data-background-icon="&#xf086;"></div>

CSS:

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

Fiddle: https://jsfiddle.net/76v9e2ur/1/

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

Use FontAwesome icon inside a ::before pseudo element with attr()

html

css

font-awesome