94

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?

Improve this question
4
  • Since the link is a 404, you may be talking about pseduo elements? Did you try adding content: ""; in the CSS for your :before element?
    – tsujp
    Commented Jan 12, 2013 at 15:49
  • pretty sure its this: fortawesome.github.com/Font-Awesome
    – Stuart Burrows
    Commented Jan 12, 2013 at 15:50
  • Yep, sorry guys! Link is fixed now! @tsujp Actually, the icon should be displayed inside the pseudo element.
    – Sven
    Commented Jan 12, 2013 at 15:50
  • Strictly speaking, you can't display HTML entities in :before. You can display Unicode characters represented by entities references in HTML, but you don't do it using the HTML entity syntax.
    – BoltClock
    Commented Jan 12, 2013 at 15:54

6 Answers 6

Reset to default
160

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

Improve this answer
5
  • 9
    I like how you added the font-family part because that is the key that made mine work
    – ajk4550
    Commented Feb 6, 2015 at 17:00
  • 1
    Note that if using Font Awesome 5, the font family has changed. See here: stackoverflow.com/a/48004111/83542
    – Kildareflare
    Commented Jul 11, 2018 at 10:39
  • 1
    only font-family: FontAwesome worked for me. not font-family: "FontAwesome"
    – Sameera R.
    Commented Aug 26, 2018 at 5:42
  • Surprisingly, nothing worked for me except for what @Sameera said. Can confirm that, as of 10/23/19, only font-family: FontAwesome worked for me as well. I wanted to use FA's arrow icon. This was my code: a:last-child:after { font-family: FontAwesome; content: '\f061'; }
    – sansae
    Commented Oct 24, 2019 at 1:27
  • 1
    fontawesome.com/how-to-use/on-the-web/advanced/…
    – R-D
    Commented Feb 9, 2021 at 21:28
128

The escaped hex reference of  is \f066.

content: "\f066";
Improve this answer
3
  • 26
    Everyone please see the answer from super_ton, that you will need to declare font-family with FontAwesome. Otherwise you'll only get a special symbol and not the correct icon!
    – lorem monkey
    Commented Oct 29, 2014 at 14:42
  • 4
    For anyone who is using CSS parsed in PHP, you'll need to double-escape the hex reference like this: content: "\\f066";
    – ramijames
    Commented Jul 3, 2016 at 7:27
  • 3
    Note that if using Font Awesome 5, the font family has changed. See here: stackoverflow.com/a/48004111/83542
    – Kildareflare
    Commented Jul 11, 2018 at 10:39
11

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";
Improve this answer
1
  • 1
    Thanks for this answer. I didn't realize the icons were in hex for some reason. So I kept putting '#' in the string and it wouldn't work. Now it works.
    – shell
    Commented May 19, 2018 at 23:58
3

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.

Improve this answer
1

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.

Improve this answer
1

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

Improve this answer
1
  • Nice answer but it would be better to add some reason and explaining.
    – jacobkim
    Commented Jul 23, 2021 at 13:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.