Html 在带有 attr() 的 ::before 伪元素中使用 FontAwesome 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36197443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use FontAwesome icon inside a ::before pseudo element with attr()
提问by sdvnksv
I am trying to insert a FontAwesome icon inside a ::beforepseudo element with attr(). The original code is more complex, however this will give you an idea of what I want:
我正在尝试在::before伪元素中插入一个 FontAwesome 图标attr()。原始代码更复杂，但是这会让您了解我想要什么：
<div data-background-icon="\f086"></div>
div::before {
content: attr(data-background-icon);
font-family: "FontAwesome";
}
https://jsfiddle.net/grutcop8/
https://jsfiddle.net/grutcop8/
It doesn't work, while the usual way to embed it works OK:
它不起作用，而通常的嵌入方法可以正常工作：
div::before {
content: "\f086";
font-family: "FontAwesome";
}
Anything I am missing?
我缺少什么吗？
回答by Jinu Kurian
Try with Unicode
尝试使用 Unicode
CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.
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.
如果要对 HTML 属性中的字符进行编码，则需要将其编码为 HTML 实体。
you should add "&#x"before your font-Awesome icon code. ie, if you want to use /f086, then write instead
您应该"&#x"在 font-Awesome 图标代码之前添加。也就是说，如果你想使用/f086，然后写代替
get the unicode from here - https://fortawesome.github.io/Font-Awesome/cheatsheet/
从这里获取 unicode - https://fortawesome.github.io/Font-Awesome/cheatsheet/
UPDATE
更新
If you are using fontAwesome 5, change font-family: "FontAwesome";to font-family: 'Font Awesome 5 Free';
如果您使用的是 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=''></div>回答by mehulmpt
CSS reads \f086as a string and not as an escape sequence. The fix is either to use it directly inside content attribute like content: '\f086';or directly copying and pasting icon in HTML attribute (make sure you save your file as UTF-8)
CSS 读取\f086为字符串而不是转义序列。修复方法是直接在内容属性中使用它，如content: '\f086';或直接在 HTML 属性中复制和粘贴图标（确保将文件保存为 UTF-8）
HTML:
HTML：
<div data-background-icon="?"></div> <!-- this is the bluetooth icon copied from fontawesome -->
CSS:
CSS：
div::before {
content: attr(data-background-icon);
font-family: "FontAwesome";
}
OR make use of HTML entities:
或使用 HTML 实体：
HTML:
HTML：
<div data-background-icon=""></div>
CSS:
CSS：
div::before {
content: attr(data-background-icon);
font-family: "FontAwesome";
}
Fiddle: https://jsfiddle.net/76v9e2ur/1/
