Content attribute in CSS to show image icon


Tags: image,css3

Problem :

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?



Solution :

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.


    CSS Howto..

    How to position a drop down list nav bar inside header in html css

    How can I modify footer color dynamically when I switch to another page in html and css

    How to get MetroUI CSS Datepicker value with javascript

    CSS: how to layout 3 columns, 2 are optional

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How could I add two separate text styles to a button in a form in CSS?

    How to use jquery .css in a javascript variable

    How to change the colors of HTML form elements displayed in UIWebView?

    CSS: how to remove the indent of list items shown in Firefox

    css float: left clash/collision, how to avoid?

    How would you replicate these boxes in CSS?

    How to keep text in same position?

    How to load all CSS and JS from one html file?

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    How to let the chrome forget the page scroll position?

    how to change default Bootstrap link hover color to custom color? [closed]

    How do i position this element relative to an image?

    How to find an element using Watir by inline css styles

    How often is the default font size in the browser not 16px?

    IE8 Not showing divs with floats

    How to move a span to a different position in a DIV

    How to make divs have table-like borders?

    how to use css to make smartgwt look like gwtext

    How to write media queries for HD/Retina Display in Landscape position?

    How to remove extra space in navigation bar? [duplicate]

    How can I force Visual Studio to follow a custom CSS template when I edit my css files?

    How to overlay two fonts with css

    How to add css to linked rails imge

    How do I make a dedicated row for javascript alerts?

    How to give Internet Explorer different CSS lines?