How does content CSS property define the icon in bootstrap

css, html, twitter-bootstrap

Solution

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

Problem

I am just wondering how `content: "\e005";` is defining the heart icon in bootstrap css. Have a look at this: 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 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

Original source