Html Unicode 通过 CSS :before
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14294935/
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
Unicode via CSS :before
提问by Sven
I am using Font Awesomeon my webpage and I want to display an icon inside the :beforepseudo element.
我在我的网页上使用Font Awesome，我想在:before伪元素中显示一个图标。
According to the documentation/cheatsheet, I have to type to get this font, but it isn't working. I believe that is normal because HTML entities aren't supported in :before.
So I googled a bit and found out, that if you want to display HTML entities in :before, you have to use the escaped hex reference.
So I was searching for the hex reference to but I found nothing. I believe that is because these are "private use" values, whatever that means.
根据文档/备忘单，我必须输入才能获取此字体，但它不起作用。我相信这是正常的，因为 .html 中不支持 HTML 实体:before。
所以我用谷歌搜索了一下，发现如果你想在 中显示 HTML 实体:before，你必须使用转义的十六进制引用。
所以我正在寻找十六进制引用，但我什么也没找到。我相信这是因为这些都是“私人使用”的价值，无论这意味着什么。
Is there any way to get it working in :before?
有什么办法让它工作:before吗？
回答by stefan
In CSS, FontAwesome unicode works only when the correct font family is declared (version 4 or less):
在 CSS 中，FontAwesome unicode 仅在声明正确的字体系列（版本 4 或更低版本）时才起作用：
font-family: "FontAwesome";
content: "\f066";
Update - Version 5 has different names:
更新 - 版本 5 有不同的名称：
Free
自由
font-family: "Font Awesome 5 Free"
Pro
亲
font-family: "Font Awesome 5 Pro"
Brands
品牌
font-family: "Font Awesome 5 Brands"
See this related answer: https://stackoverflow.com/a/48004111/2575724
请参阅此相关答案：https: //stackoverflow.com/a/48004111/2575724
回答by JJJ
The escaped hex reference of is \f066.
的转义十六进制引用是\f066。
content: "\f066";
回答by newtron
Fileformat.infois a pretty good reference for this stuff. In your case, it's already in hex, so the hex value is f066. So you'd do:
Fileformat.info是这些东西的一个很好的参考。在您的情况下，它已经是十六进制的，因此十六进制值为f066. 所以你会这样做：
content: "\f066";
回答by Jukka K. Korpela
The code points used in icon font tricks are usually Private Use code points, which means that they have no generally defined meaning and should not be used in open information interchange, only by private agreement between interested parties. However, Private Use code points can be represented as any other Unicode value, e.g. in CSS using a notation like \f066, as others have answered. You can even enter the code point as such, if your document is UTF-8 encoded and you know how to type an arbitrary Unicode value by its number in your authoring environment (but of course it would normally be displayed using a symbol for an unknown character).
图标字体技巧中使用的代码点通常是 Private Use 代码点，这意味着它们没有普遍定义的含义，不应在公开信息交换中使用，只能通过相关方之间的私人协议。但是，专用代码点可以表示为任何其他 Unicode 值，例如在 CSS 中使用类似 的符号\f066，正如其他人所回答的那样。如果您的文档是 UTF-8 编码的并且您知道如何在创作环境中通过其编号键入任意 Unicode 值（但当然它通常会使用符号显示未知），您甚至可以这样输入代码点特点）。
However, this is not the normal way of using icon fonts. Normally you use a CSS file provided with the font and use constructs like <span class="icon-resize-small">foo</span>. The CSS code will then take care of inserting the symbol at the start of the element, and you don't need to know the code point number.
但是，这不是使用图标字体的正常方式。通常，您使用随字体提供的 CSS 文件并使用<span class="icon-resize-small">foo</span>. 然后 CSS 代码将负责在元素的开头插入符号，您不需要知道代码点编号。
回答by Ashraful Alam
At first link fontwaesome CSS file in your HTML file then create an after or before pseudo class like "font-family: "FontAwesome"; content: "\f101";" then save. I hope this work good.
首先在你的 HTML 文件中链接 fontwaesome CSS 文件，然后创建一个 after 或 before 伪类，如“font-family: "FontAwesome"; content: "\f101";” 然后保存。我希望这项工作很好。
