Sprite tekniğinde de aynı şekilde uzayacak yeni farkettim

Sprite tekniği bütün resimleri birleştirip tek bir dosya üzerinden çağırmaya deniyor.
.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;
}

Burada sadece bir ikonun kodu var. Sizin kullandığınız örnekte 5 tane ikon olduğu için hover ile birlikte 10 satır oluyor.

Sprite kullandığınız zaman bu 10 satır yine aynı kalacak. Sebebi her li elemanına mecburen arkaplan olarak birleştirdiğiniz resmi eklemeniz gerekiyor yine.
Örnek :
birinci ikon {background:url('birlestirdiginiz_resim.png') -60px 0;}
ikinci ikon {background:url('birlestirdiginiz_resim.png') -120px 0;}

Ayrıca şuradaki linkte sizin çalışmanıza benzer bir örnek anlatılmış.

Yani bu şekilde yine aynı olduğu gibi çoğalıp gidecektir.