How to extract a specific icon from a png file?

Question

I'm building a php website and have a set of icons in one png file.

However, I have no idea how to extract a specific icon from this big file since they are all merged into one image. Can anyone tell me what to do?

Answer 1

The usual technique is to set the image as background for an element, set the width and height of the element equal to the width and height of the icon and use background-position to place the desired icon "in view".

So if the icons are 10px by 10px and the one you want is the 4th on the 2nd row, you can do this:

.myIcon {
  background-image: url(myImage);
  width:10px;
  height:10px;
  background-position: -30px -10px;
}