Reputation: 9419

What is the meaning of content and backward slash in css

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"

Upvotes: 5

Answers (4)

Yair Nevet

Reputation: 13003

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

Upvotes: 2

Sarath

Reputation: 608

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

Upvotes: 0

Shomz

Reputation: 37701

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/

Upvotes: 6

elixenide

Reputation: 44831

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.

Upvotes: 1

What is the meaning of content and backward slash in css

Answers (4)

Related Questions