CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sachin Jain
Sachin Jain

Reputation: 21842

How does content CSS property define the icon in bootstrap

I am just wondering how content: "\e005"; is defining the heart icon in bootstrap css.

Have a look at this:

enter image description here

In chrome debugger, if I changed this value to something else, this heart icon is no longer available. Here is the JSbin demo in case somebody wants to play with it.

Q. How does this content: "\e0005" property is creating this icon ?

EDIT:

I see a network call to glyphicons-halflings-regular.woff and glyphicons-halflings-regular.ttf. Here is the snapshot for it

enter image description here

I only see the alphabets and numbers A-Z|a-z|0-9 in the response. There is no heart icon or any other icon in the downloaded font as well. So again question arises how is this heart formed ?

PS: BootStrap Glyphicons page

Upvotes: 2

Views: 4358

Answers (2)

heyarne
heyarne

Reputation: 1167

Well, if you look at the css at the Glyphicons page, you see that every element with class glyphicon is rendered with font-family: 'Glyphicons Halflings'.

This is a custom font that's designed to hold only icons. It has different icons for different unicode chars where content: "\e0005" maps to the heart icon you're referring to.

Upvotes: 1

Tim Baas
Tim Baas

Reputation: 6185

Every element in HTML has :before and :after psuedo's. These are elements created by the browser before and after the content in the corresponding element. You can define them with CSS. Which is what Bootstrap does.

The bootstrap CSS creates an element before the content in the <span> tag. With the content property the content in this new element is defined to be the icon. 

span.icon:before {
  font-family: 'Glyphicons Halflings';
  content: "\2601";
}

The icon is just a character in the font (Glyphicons).

Upvotes: 6

Related Questions