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"

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/

Answer 2

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.

Answer 3

.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.

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