Делаем иконки статуса тем/форумов одной картинкой (спрайтом)

Довольно удобное решение, особенно для форумов 2х2

Давно собирался поделится с сообществом данным хаком, поэтому изначально предполагалось сделать что-то наподобие урока, но в последствии засомневался из-за сложности создания и использования таких иконок в дальнейшем. К счастью, сейчас на тему создания картинок-спрайтов в интернете размещено огромное количество уроков, и при необходимости, кому надо будет, тот для себя отыщет и изучит. А для остальных предлагаю, так сказать, готовое решение с описанием.
Кто-то наверняка знает, но не использует либо в силу своей лени, либо оно ему незачем . Не сказать, что эта идея инновационная, но кардинально отличается от всех тех представлений, которые вы видели раньше на этом форуме. Так вдруг данный хак подтолкнет наших "фотошоперов" к созданию новых иконок по данному эскизу?!
Хоть на форуме тех.поддержки и полно ответов на тему своих иконок, но многие забывают, что помимо основных иконок тем (в теме есть новые сообщения/нет новых сообщений), тема так же может быть закреплена и в ней могут быть новые сообщения. Или тема может быть вовсе закрытой, а в ней могут быть новые сообщения. А еще круче - закрепленная закрытая тема и в ней есть новые сообщения (оставленные, к примеру, администраторами или модераторами).

Вместо 4-8 отдельных иконок используется всего одна. К сожалению, без минусов использования данного хака не обойтись: при замене иконки на другую каждый раз придется редактировать в фотошопе, высчитывая местоположение иконки (а то и нескольких иконок), и затем снова загружать на форум. Единственной иконки которой здесь нет - иконка форума "переадресация на URL", поскольку эти иконки я делал лет 5 назад специально для своего форума. Несмотря на все сложности создания и редактирования иконок, можете использовать мои иконки у себя на форуме.

8 типов иконок в одной картинке (слева на право):
- Обычная открытая тема, Нет новых сообщений;
- Обычная открытая тема, Есть новые сообщения;
- Обычная закрытая тема, Нет новых сообщений;
- Обычная закрытая тема, Есть новые сообщения;
- Важная открытая тема, Нет новых сообщений;
- Важная открытая тема, Есть новые сообщения;
- Важная закрытая тема, Нет новых сообщений;
- Важная закрытая тема, Есть новые сообщения.
Спрайт размером 288px в ширину и 28px в высоту.
Каждая иконка в спрайте имеет размер ~36px в ширину и 28px в высоту.
В коде разметил комментарии: где и для какой иконки используется позиционирование.

Код:

/* Иконки форумов одной картинкой */
div.icon {
  display: inline-block;
  width: 36px !important;
  height: 28px !important;
  background-image: url(https://i37.servimg.com/u/f37/18/40/24/57/4444410.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
/* Обычная открытая тема - Есть новые сообщения */
.inew .icon {
  background-position: -36px 0;
}
/* Обычная закрытая тема - Нет новых сообщений */
.iclosed .icon {
  background-position: -74px 0;
}
/* Обычная закрытая тема - Есть новые сообщения */
.inew.iclosed .icon {
  background-position: -108px 0;
}
/* Важная открытая тема - Нет новых сообщений */
.isticky .icon {
  background-position: -144px 0;
}
/* Важная открытая тема - Есть новые сообщения */
.inew.isticky .icon {
  background-position: -180px 0;
}
/* Важная закрытая тема - Нет новых сообщений */
.isticky.iclosed .icon {
  background-position: -216px 0;
}
/* Важная закрытая тема - Есть новые сообщения */
.inew.isticky.iclosed .icon {
  background-position: -252px 0;
}

В данном коде Вас интересует все, но если захотите заменить спрайт то вот эта часть кода актуальнее всего

Код:

background-image: url(https://i37.servimg.com/u/f37/18/40/24/57/4444410.png);

В данном случае думаю и так понятно где ссылка на картинку.