IMAGESPRITE

Run
<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		.sprite {
    background-image: url(https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1619843628-79539.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -5px -5px;
}

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -5px -45px;
}

.sprite-stackoverflow {
    width: 30px;
    height: 30px;
    background-position: -45px -45px;
}

.sprite-tumblr {
    width: 30px;
    height: 30px;
    background-position: -85px -5px;
}

.sprite-twitter {
    width: 30px;
    height: 30px;
    background-position: -85px -45px;
}

	</style>
</head>
<body>
	<i class="sprite sprite-github"></i>
<i class="sprite sprite-gmail"></i>
<i class="sprite sprite-linkedin"></i>
<i class="sprite sprite-stackoverflow"></i>
<i class="sprite sprite-tumblr"></i>
<i class="sprite sprite-twitter"></i>

</body>
</html>