Unicode via CSS: before

Question

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

According to the documentation / cheatsheet , I have to type  to get this font, but it doesn’t work. I believe this is normal because HTML objects are not supported in :before .
So I searched the language a bit and found out that if you want to display HTML objects in :before , you need to use the escaped hexadecimal link.
So I was looking for the sixth link to  but found nothing. I believe this is because these are the meanings of “private use”, whatever that means.

Is there a way to make it work in :before ?

Answer 1

Escaped hexadecimal job  equals \f066 .

 content: "\f066"; 

Answer 2

In CSS, Unicode FontAwesome only works when the correct font family is declared:

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

Answer 3

Fileformat.info is a pretty good link for this stuff. In your case, it is already in hexadecimal, so the hexadecimal value is f066 . So you would do:

 content: "\f066"; 

Answer 4

The code points used in icon font tricks are usually personal use codes, which means that they do not have a generally accepted meaning and should not be used in an open exchange of information only by private agreement between interested parties. However, private-use code points can be represented as any other Unicode value, for example. in CSS using notations like \f066 , as others have answered. You can even enter a code point as such if your document is encoded in UTF-8, and you know how to enter an arbitrary Unicode value by its number in your development environment (but, of course, it is usually displayed using a character for an unknown character) .

However, this is not a common way to use icons. Typically, you use a CSS file with a font and use constructs such as <span class="icon-resize-small">foo</span> . Then the CSS code will take care of inserting the character at the beginning of the element, and you do not need to know the code point number.