In some template I see that an arrow that created with CSS. something like this:
div:after{
content:"\f107";
}
this code display an arrow like this :
what is this code? where I can find more codes?
Using content
property embeds a virtual content inside an element, it is used with a pseudo :before
or :after
, so if you use :before
, the content will be embedded before.
From MDN :
The
content
CSS property is used with the::before
and::after
pseudo-elements to generate content in an element. Objects inserted using thecontent
property are anonymous replaced elements.
Content property can hold any character, number, entities. For more information, you can refer an article here.
Also, you can get an handy converter here.
This method is also used by font-awesome - Example and other related svg font embedding libraries, where you can simply call classes to the elements and the fonts will be embedded virtually.
Also, just a side information, content generated using CSS content
property is inline
by default, also this is rendered inside the element and not outside..
It's an escaped unicode character.
As other answers have explained, the CSS rule uses the content
property to insert a character by its Unicode number.
However, the character used is U+F107 PRIVATE USE CHARACTER-F107. This means that it has no meaning except by private agreements and should not be used in public information interchange. Unfortunately, some “awesome” tricks use Private Use code points to insert graphic symbols. This means that unless a very specific font, with some symbols assigned to those code points is used, a generic symbol of an unknown character appears.
So it is much safer to use an image instead, in the content proper.
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