Coding Icons with the Help of Pseudo-Elements and CSS Property Clip

by barba

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

Tags | coding, css, Icons