Unicode via CSS before

Question

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  amp  xf066  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  amp  xf066  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

User · Answer

In CSS  FontAwesome unicode works only when the correct font family is declared  version 4 or less   font-family   quot FontAwesome quot   content   quot  f066 quot    Update - Version 5 has different names  Free font-family   quot Font Awesome 5 Free quot   Pro font-family   quot Font Awesome 5 Pro quot   Brands font-family   quot Font Awesome 5 Brands quot   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

User · Answer

The escaped hex reference of  amp  xf066  is  f066   content    f066

User · Answer

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  lt span class  icon-resize-small  gt foo lt  span gt   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

User · Answer

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

User · Answer

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

[html] Unicode via CSS :before

Examples related to html

Examples related to css

Examples related to unicode

Examples related to encoding

Examples related to icons