Try it Yourself: CSS Image Sprites

CSS Image Sprites

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('icons.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.icon-home {
  background-position: 0 0;
}

.icon-search {
  background-position: -32px 0;
}

.icon-user {
  background-position: -64px 0;
}
</style>
</head>
<body>

<span class="icon icon-home"></span>
<span class="icon icon-search"></span>
<span class="icon icon-user"></span>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('icons.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.icon-home {
  background-position: 0 0;
}

.icon-search {
  background-position: -32px 0;
}

.icon-user {
  background-position: -64px 0;
}
</style>
</head>
<body>

<span class="icon icon-home"></span>
<span class="icon icon-search"></span>
<span class="icon icon-user"></span>

</body>
</html>