The main advantage of using image sprite is to reduce the number of http requests that makes our site’s load time faster.
Following is the code for displaying an icon from image sprite using CSS −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>Output
The above code will produce the following output −
