Почему мои CSS-спрайты не работают?

Question

Просто тестирую CSS-спрайты и не могу заставить их работать по какой-то причине.

Codepen здесь: http://codepen.io/mildrenben/pen/VYWxbM

HTML:

<i class="icon-electrical14"></i>
<i class="icon-hazelnut1"></i>
<i class="icon-megaphone10"></i>
<i class="icon-winds2"></i>

CSS:

.icon-electrical14 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px 0px;
  width: 64px;
  height: 64px;
}
.icon-hazelnut1 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px 0px;
  width: 64px;
  height: 64px;
}
.icon-megaphone10 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px -64px;
  width: 64px;
  height: 56px;
}
.icon-winds2 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px -64px;
  width: 64px;
  height: 52px;
}

Answer 1

Применять display: block или же inline-block в i,

Обновлен CodePen

i[class*="icon-"] {
  display: block;
}
.icon-electrical14 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px 0px;
  width: 64px;
  height: 64px;
}
.icon-hazelnut1 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px 0px;
  width: 64px;
  height: 64px;
}
.icon-megaphone10 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px -64px;
  width: 64px;
  height: 56px;
}
.icon-winds2 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px -64px;
  width: 64px;
  height: 52px;
}

<i class="icon-electrical14"></i>
<i class="icon-hazelnut1"></i>
<i class="icon-megaphone10"></i>
<i class="icon-winds2"></i>

---

Примечание: если у вас есть i теги, предназначенные для шрифтов, а не значков на вашей странице, вы можете использовать следующий селектор, чтобы выбрать классы, которые имеют icon Ключевое слово в class приписывать.

i[class*="icon"] {....}