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

Question

我试图在一个::before伪元素中插入一个FontAwesome图标attr().原始代码更复杂,但是这会让你知道我想要什么:

<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字符串的一部分.

如果要在HTML属性中对字符进行编码,则需要将其编码为HTML实体.

你应该"&#x"在你的font-Awesome图标代码之前添加.也就是说,如果你想使用/f086,然后写&#xf086代替

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

UPDATE

如果您使用的是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>