Core Code
Core Code Modern Dev Handbook

CSS Multiple Sprite Icons

Different icons can be displayed using background offsets.

Preview

Code

<style>
.icon{
width:50px;
height:50px;
background:url(https://picsum.photos/200/50);
display:inline-block;
}

.i1{background-position:0 0;}
.i2{background-position:-50px 0;}
.i3{background-position:-100px 0;}
</style>

<div class="icon i1"></div>
<div class="icon i2"></div>
<div class="icon i3"></div>

More CSS Image Sprites Examples (6)

example CSS Basic Image Sprite open example example CSS Sprite Background Position open example example CSS Sprite Hover Effect open example example CSS Navigation Icons Using Sprites open example example CSS Sprite Button open example example CSS Sprite Background Offset open example