Bunun en kısa hali şu şekilde olur.
Html :

<div class="cerceve">
<li><a href="#" title="Facebook"></a></li>
<li><a href="#" title="Twitter"></a></li>
<li><a href="#" title="Google+"></a></li>
<li><a href="#" title="Youtube"></a></li>
<li><a href="#" title="RSS"></a></li>
</div>

Css :

.cerceve {
   width:300px;
    height:60px;
    background-color:black;
}
.cerceve li {
   display: block;
   width: 60px;
   height: 60px;
    list-style:none;
   float:left;
}

.cerceve li:nth-child(1){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(1){
 background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}
.cerceve li:nth-child(2){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(2){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}
.cerceve li:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}
.cerceve li:nth-child(4){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(4){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}
.cerceve li:nth-child(5){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(5){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; 
}

İşlemin sonucu böyle çıkıyor şekilde çıkıyor.
Daha fazla kısaltmak istersen Font Awesome kullanmalısın. Hazır png formatında resimler kullanarak daha fazla kısamazsınız.