Question
I am using sprite image for my website, My Icons are stacked horizontally and vertically.
The issue is when i try to use one particular sprite icon from the sprite image, I am not able to use only the corresponding sprite icon(rounded in blue in SS below) instead i got the entire image is spanning my div as below in Screenshot
I want to use only the particular Icon in left of text using padding-left (i gave 30px). I tried using background-size also, it is not working.
Please help me in this. Thanks in advance for any help. My code is
https://stackoverflow.com/questions/22478601
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>
See this JS BIN Demo http://jsbin.com/yojaj/1/edit
Solution
You need to add width and height rules in the sprite class to match the size of the icon in the sprite that you need.
Also try adding the icon as a pseudo element - like so:
.sprite:before {
content:'';
display: inline-block;
background:url("http://lorempixel.com/400/200/food") -50px -50px no-repeat transparent;
margin-right:5px;
color:red;
width: 20px;
/* icon width */
height: 20px;
/* icon height */
vertical-align: middle;
}
OTHER TIPS
You need to specify width and height for the .sprite class e.g
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>
Try this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
margin-right:30px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite"></div><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</body>
used to this
Define your html sprate icon class as like this
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}
<div class="">
<div>
<span class="sprite"></span> // add this icon try this way
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
------------------ ------------------Updated
than do this only for css
.sprite{
position:relative;
}
.sprite:after{
content:"";
position:absolute;
left:0;
top:0;
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}
