What does content:" f0ed" mean?

Question

I am developing a site from a ready template, when inspecting element and check which image to swap found the Css as follows.

.fa-cloud-download:before
{
  content:"\f0ed"
}

• What does that mean Css?

• How can I know which image is loaded from that Css?

Answer 1

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

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

<div></div>

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

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

div:before {content:"\0041";}

<div></div>

_{To know the address of other characters, just look at the Character Map of Windows or do a quick search on the internet.}

It is not recommended to add special characters in codes, for example in json or in our case content CSS, so its hexadecimal addresses are used, for example the symbol ♥, that does not exist on the Brazilian keyboard, but can be added with a shortcut ALT+3.

div:before {content:"\2665";}

<div></div>

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

Some commonly used icon fonts are:

• Fontawesome
• Twitter icons Bootstrap
• Icomoon
• Fontello

Among several others on the web, just search for icon font who will find dozens...

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

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

Heed: so that the content function it is necessary to specify from which source the address is, for example: font-family: FontAwesome;

Answer 2

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

Codes where you can find more icons: Link