- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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 09:22:13
- Related Questions & Answers
- Advantage of Using CSS Image Sprite
- Creating a Navigation Menu using CSS Image Sprite
- Vertical alignment of an image using CSS
- How to create image overlay icon effect on hover with CSS?
- PHP: recreate and display an image from binary data
- How to create a JLabel with an image icon in Java?
- Center an image with CSS
- How to pick an image from an image gallery on Android using Kotlin?
- How can I display an image using Pillow in Tkinter?
- How can I display an image using cv2 in Python?
- Display Block using CSS
- Display Inline using CSS
- Setting Background Image using CSS
- How to place text blocks over an image using CSS?
- How to display an image in HTML?
Advertisements