0

To reduce the loadtime of my webpage I put all icons into one big imagefile.

enter image description here

What I need now is the fourth icon (attachment-icon) as button icon.

This is what I have:

button.attach {
  background: lightgray url(https://i.stack.imgur.com/ZT5KK.png);
  background-position-x: -116px;
  padding-left:30px;
  height:45px;
  
}
<button class="attach"> Attach file</button>

Unfortunately the fifth icon (trash) and the sixth icon (bug) sneak behind the text. How to cut the image down to this icon only?

Grim
  • 1,938
  • 10
  • 56
  • 123
  • Try [this](https://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css). – sbgib Mar 01 '21 at 09:50

1 Answers1

1

button.attach span {
    background: lightgray url(https://i.stack.imgur.com/ZT5KK.png) -111px 38px;
    padding-left: 1px;
    display: block;
    float: left;
    width: 35px;
    height: 35px;
}
    button.attach {
    width: 130px;
    height: 44px;
}
    <button class="attach"><span></span> Attach file</button>

Here i attached css in snippet, you can adjust as per your requirements. let me know if you have any query.

Harshsetia
  • 256
  • 2
  • 6