Edit in JSFiddle

ul li{
    display:inline;}
ul li a{
    height:28px;
    width:28px;
    text-indent:-9999em; /* oculta el texto */
    display:inline-block;
    background:url(http://i819.photobucket.com/albums/zz119/jakijem/sprite_iconos_vert_2_zpsde6da52e.png);}

ul li.item1 a:hover{
    background-position:0 -28px;}
ul li.item2 a{
    background-position:0 -56px;}
ul li.item2 a:hover{
    background-position:0 -84px;}
ul li.item3 a{
    background-position:0 -112px;}
ul li.item3 a:hover{
    background-position:0 -140px;}

<ul>
    <li class="item1"><a href="#">Item1 </a></li>
    <li class="item2"><a href="#">Item2 </a></li>
    <li class="item3"><a href="#">Item3 </a></li>
</ul>