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

Question

我正在尝试在一个::before伪元素中使用attr()插入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";
}

我有漏掉什么吗？

- sdvnksv

---

您对数据的引用似乎是正确的：https://jsfiddle.net/76v9e2ur/ - timo

@timo，它确实存在，但它没有显示图标。 - sdvnksv

一种更复杂的方式是创建一个类，其内容为“\f086”，并仅在元素具有“data-...” ==“\f086”时将该类添加到该元素中。哇，最好不要考虑这个。 - Tommy

Answer 1

尝试使用 Unicode

CSS 转义序列只能在 CSS 字符串内部使用。如果您从 HTML 属性（即 CSS 之外）中获取 CSS 转义序列，则它将被视为字面值，而不是解释为 CSS 字符串的一部分。

如果要在 HTML 属性中编码字符，则需要将其编码为 HTML 实体。

应该在您的 Font Awesome 图标代码之前添加"&#x"。例如，如果想使用/f086，则写&#xf086

从此处获取Unicode - https://fortawesome.github.io/Font-Awesome/cheatsheet/

更新

If you are using fontAwesome 5, change font-family: "FontAwesome"; to 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>

- Jinu Kurian

---

谢谢，它有效了！不过，它并不完全符合W3C标准，对吗？ - sdvnksv

是的。它会给出一个警告，如下所示 - “文档使用Unicode专用区域，不应在公开交换的文档中使用。(Charmod C073)” - Jinu Kurian

@DaVoDHoseiny，你可能正在使用fontAwesome5。如果是这样，请参考此链接-https://jsfiddle.net/Jinukurian7/nfgp8e0a/1/ - Jinu Kurian

Answer 2

CSS将\f086读作字符串而不是转义序列。修复方法要么直接在content属性内使用它，例如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/

- mehulmpt

---

请注意，如果使用 Font Awesome 5，则字体系列已更改。请参见此处：https://dev59.com/RFYN5IYBdhLWcg3wJFT8#48004111 - Kildareflare