What does content mean: "\ f0ed"?

The content property in CSS is to add some content, for example:

div::after{
  display:block;
  content:"Hello World";
}

<div></div>

It's important to note that content property only works if used with pseudo-elements :after and :before . To learn more about pseudo-elements see W3Schools .

The code \f0ed is a hexadecimal number that represents the address of a character in a font ( which in the case is this character ). For example, to add the letter A just use the code json41 which is your address.

div:before {content:"
<div></div>
41";}

div:before {content:"65";}

To find the address of other characters, just look at the Character Map from Windows or do a quick search on the internet.

It is not recommended to add special characters in codes, such as content or in our case ♥ of CSS, so use their hexadecimal addresses, for example the symbol content , which does not exist on the Brazilian keyboard, but can be added with a ALT shortcut + 3 .

<div></div>

div::after{
  display:block;
  content:"Hello World";
}

Some fonts are created especially for the web, such as Icon Fonts . These icon fonts started to be used on the web thanks to icon font property, since they could be correctly referenced in the code and could change color, increase and decrease in size without losing quality, other than sprites ( images with various icons) that weighed heavily on page loading and were not "flexible" like the fonts.

Some commonly used icon fonts are:

• FontAwesome
• Twitter Bootstrap Icons
• IcoMoon
• Fontello

Among many others on the web, just search for fa-cloud-download you'll find dozens ...

The class fa- belongs to FontAwesome (easily identified by the prefix content ), you can identify multiple icons , it is not recommended to change the CSS provided by them, because when it is updating the library (new icons are constantly added) you will lose your modification.

Just choose the desired icon in the documentation and change the class in the element you want to change the icon .

Caution: For font-family: FontAwesome; to work, you must specify the source of the address, for example: %code%

You are selecting the fa-cloud-download class element, with pseudo-elemento :before telling the browser that I want to do something at the beginning of this element, the content property is used to insert dynamic content in HTML . In this case, I am inserting a code element: \f0ed which would be a icon (or glyphicon ).

Codes where you can find more icons : Link