Display an Icon from Image Sprite using CSS
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
Live Demo
<!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 −
Published on 11-May-2020 12:52:13
