What is the meaning of content and backward slash in css

Question

I have downloaded a site with a site downloader, which had nice icons on it. But after downloading it, that icons went away and I cannot see any image file.

In html, it's like this.

<li class="active">
   <a href="buttons.html">
      <i class="icon-up"></i> Buttons
   </a>
</li>

the class looks like below.

.icon-up:before {content: "\f0a6"; }

What is the meaning of that class definition's

:before
content

and

"\f0a6"

Policeman

Are you trying to figure out where the icons went? It's probably using an icon font that's somehow not loading correctly in the downloaded site. – Fluency

Answer 1

Google really helps.

content denotes a real content that's put inside a css element. So, p:before {content: 'hello'} would put a string hello in front of the paragraph content. See here: http://jsfiddle.net/gRjRe/

The content you shown ("\f0a6") is just a Unicode value for a font character. See how they are used here, for example: http://astronautweb.co/snippet/font-awesome/

Maidie

Technically, \f0a6 refers to Unicode code point U+F0A6, which is a Private Use code point. No character is assigned to it by the Unicode standard, but it may be used by agreements between interested parties; so it is a “character” only if you make a special agreement on that. Font Awesome violates the principle that Private Use code points should not be used in public information interchange. – Tinct

+1 They are violating them too often, I wouldn't be surprised if it becomes a standard soon. – Maidie

Answer 2

.icon-up:before {content: "\f0a6"; }

Explanation:

• :before is before each matched/found .icon-up element

• content is the content to introduce before each .icon-up element, in your case, it is a Unicode value f0a6 (61606), which generated by Font Awesome as a vector icon:

Definition:

• The :before selector inserts content before the content of the selected element(s).

• The content property is used with the :before and :after pseudo-elements, to insert generated content.

Tract

Answer 3

It outputs the character with Unicode value f0a6 (61606) before any element with class icon-up. As Shomz pointed out via this link, it's a hand pointing upward in this context.

Operator

Answer 4

tag:before{content:value}

means put the value of content before the tag

and "\f0a6" means hand up icon

in your case a handup icon will shown before the list Buttons

Remitter