Content attribute in CSS to show image icon

Question

While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?

.test.glass i:before {
  content: "\e001";
}

Following is the html element to show an image icon using above css:

<span class="test glass"><i></i></span>

But what is "\e001" is that an image code or something else?

Answer 1

they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.

if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont">&#xe001;</span>. if you add the image with css then is like in your example.