Unicode via CSS: before

我在我的网页上使用 超赞字体,我想显示一个图标内的 :before伪元素。

根据 文件/备忘录,我必须输入 才能得到这种字体,但它不工作。我认为这是正常的,因为在 :before中不支持 HTML 实体。
所以我谷歌了一下,发现如果你想在 :before中显示 HTML 实体,你必须使用转义的十六进制引用。
所以我一直在寻找 的十六进制引用,但是一无所获。我相信这是因为这些都是“私人使用”的价值观,不管这意味着什么。

有什么办法能让它在 :before中工作吗?

133977 次浏览

The escaped hex reference of  is \f066.

content: "\f066";

Fileformat.info is 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:

content: "\f066";

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).

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.

In CSS, FontAwesome unicode works only when the correct font family is declared (version 4 or less):

font-family: "FontAwesome";
content: "\f066";

Update - Version 5 has different names:

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

As per comment (BuddyZ) some more info here https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

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.

Important thing - you have to add the font-weight (font-weight:900) to get it work.