Display an Icon from Image Sprite using CSS

CSSWeb DevelopmentFront End Technology

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 −

raja
AmitDiwan
Published on 11-May-2020 09:22:13
Previous Page Print Page
Next Page  
Advertisements