CODEWITHSUNDEEP
csscss-sprites
mildrenben
mildrenben

Reputation: 3757

Why are my CSS Sprites not working?

Just testing out CSS sprites and cannot get them working for some reason.

Codepen here: 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;
}

Upvotes: 1

Views: 1684

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Apply display: block or inline-block to i.

Updated 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>

Side Note: If you have some i tags dedicated to fonts and not icons on your page, you could use the following selector to select the classes that has icon keyword in the class attribute.

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

Upvotes: 4

Related Questions