Unicode via CSS :before
HtmlCssUnicodeEncodingIconsHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
The escaped hex reference of  is \f066.
content: "\f066";
Solution 3 - Html
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";
Solution 4 - Html
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.
Solution 5 - Html
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.
Solution 6 - Html
Important thing - you have to add the font-weight (font-weight:900) to get it work.