Use the image as a background and use the background-position
to move it..
<span class="icon nth"></span>
and
.icon{
width:16px;
height:16px;
display:inline-block;
background-image: url('pic.jpg');
}
.icon.nth{
background-position:-32px -16px; /*both left and top should be multiples of the icon dimensions*/
}
If you have to do it like in your example, then you would need a wrapper again that is overflow:hidden
and then move the image inside it..
<span class="icon-wrapper"><img src="pic.jpg" style="left:-16px;top:-32px;" /></span>
and
.icon-wrapper{
width:16px;
height:16px;
display:inline-block;
overflow:hidden;
position:relative;
}
.icon-wrapper img{position:absolute;}