<div class="center">
  <h3>На самом деле это одна картинка!</h3>

  <div class="icon i-1"></div>
  <div class="icon i-2"></div>
  <div class="icon i-3"></div>
  <div class="icon i-4"></div>
  <div class="icon i-5"></div>
  <div class="icon i-6"></div>
  <div class="icon i-7"></div>
  <div class="icon i-8"></div>
</div>
.icon {
  background: url(http://api.web-panda.ru/images/spritesmiley.png);
  width:30px;
  height: 35px;
  display:inline-block;
}
.center{text-align:center;}
.i-1{ background-position: 0px 0px; }
.i-2{ background-position: 38px 0px; }
.i-3{ background-position: 95px 0px; }
.i-4{ background-position: 160px 0px; }
.i-5{ background-position: 190px 0px; }
.i-6{ background-position: 218px 0px; }
.i-7{ background-position: 248px 0px; }
.i-8{ background-position: 275px 0px; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.