via css书签,Unicode via CSS :before

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using Font Awesome on my webpage and I want to display an icon inside the :before pseudo element.

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.

Is there any way to get it working in :before?

回答1:

The escaped hex reference of  is \f066.

content: "\f066";

回答2:

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

回答3:

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";

回答4:

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

回答5:

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.