Menu
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?
799
To add a Unicode character to the CSS content property, you can do either of the following: Add a Unicode character directly, or; Use the Character's Hexadecimal Unicode Code Point Value.
The CSS3 pseudo-element ::before will place the icon before the link text. In this example, the ID selector for the menu's home link is #menu-link-1 which you can see by right-clicking the link and choosing Inspect in the browser menu. You can also use the ::after pseudo-element to place an icon after the link text.
The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
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
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
