Unicode via CSS :before

html css unicode encoding icons
Sven picture Sven · Jan 12, 2013 · Viewed 113.2k times · Source

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?

Answer

stefan picture stefan · Aug 15, 2014

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

Related questions

Font Awesome & Unicode

I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way: <i class="icon-home"></i> But (for some reasons) I want to use it in the Unicode way, like: &…

Read More
How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

I'm finding Unicode for special characters from FileFormat.Info's search. Some characters are rendering as the classic black-and-white glyphs, such as ⚠ (warning sign, \u26A0 or &#x26a0;). These are preferable, since I can apply CSS styles (such as …

Read More
Color for Unicode Emoji

It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only …

Read More