A good way to code the icons located next to the titles, or as custom list markers is to create them with the help of pseudo-elements.
Formerly, I did it with the extra markup – for example, a [i] tag, which was positioned absolutely and was set with the background sprite image with icons.
This method lets you avoid the extra markup, but for earlier versions of IE you’ll need to write an expression, which will perform the insertion of a pseudo-element.
So, we have the header:
<h1 id="anchor-header">Header</h1>
And we want to put the icon of the sprite before him:
#anchor-header {
position: relative;
padding-left: 21px;
background-image: expression(this.runtimeStyle.backgroundImage="none",
this.innerHTML = '<img alt="" src="http://f.cl.ly/items/1l1g2a3A161P1f121r1m/blog-icons.png">'+this.innerHTML);
}
#anchor-header:before,
#anchor-header img {
content: url(f.cl.ly/items/1l1g2a3A161P1f121r1m/blog-icons.png);
position: absolute;
top: 3px;
clip: rect(4px 15px 18px 0);
left: -14px;
}
And we get header with the icon:
Advantage of this method over the background technique:
• Unlike background images, these images are printed with the document (they are sent to the printer).
• No extra html-markup.
Example on jsfiddle
My name is Ivan Vasiliev. I've been doing html-coding, and javascript programming since 2005. For me it's not only a job or occupation, I'm really fond of it. So I'm trying to keep abreast of the latest trends in html-coding and do my work in a way, so that primarily I would be sitisfied with the result myself. For all the time that I work in this sphere I've coded a lot of different sites. Some of them you can see in my portfolio
Subscribe to our email newsletter for useful tips and freebies.
