Верстка иконок с помощью псевдо-элементов и css свойства clip

Хороший способ верстки иконок, расположенных рядом с заголовками, или в качестве нестандартных маркеров списка — с помощью псевдо-элементов.

Раньше я это делал с помощью дополнительной разметки — например, тега <i>, который позиционировал абсолютно и фоном задавал картинку-спрайт с иконками.

Это способ позволяет избежать дополнительной разметки, но для IE младше 8го нужно написать expression, который будет осуществлять вставку псевдо-элемента.

Итак, есть заголовок:

<h1 id="anchor-header">Заголовок</h1>

И перед ним мы хотим поставить иконку из спрайта:

#anchor-header {
  position: relative;
  padding-left: 21px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",
  this.innerHTML = '<img alt="" src="https://habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png">'+this.innerHTML);
}
 
#anchor-header:before,
#anchor-header img {
  content: url(habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png);
  position: absolute;
  top: 3px;
  clip: rect(4px 15px 18px 0);
  left: -14px;   
}

Получаем заголовок с иконкой:

По сравнению со способом, где иконка делается background'ом, преимущества следующие:

• При печати иконка будет выводиться, потому что задана с помощью <img>, а не фоном;
• Не нужна дополнительная html-разметка.

Пример на jsfiddle