This shows the top,left coordinates for the image to be displayed using CSS.<\/figcaption><\/figure>\nThose aren’t coordinates! Well, no. They are not Cartesian or polar coordinates. They are a special type of coordinate that defines the leftmost and topmost margin of the given image. Negative margins shift the image up and left. So the coordinates (-136,-68) when used in the CSS property of background-position:-136px -68px would render the margin to start at the top left corner of the shopping cart icon in this image. So with that in mind, we can now build our containers for the icons.<\/p>\n
When I’m developing I like to break out my CSS into logical functions. In this case I want to create a class for the container that will contain the icon. Something like this should do just fine.
\n.icon {
\nheight:68px;
\nwidth:68px;
\nbackground-image:url('images\/web_icons.png'); \/*your location of the image may differ*\/
\n}
\n<\/code>
\nA base class now exists that pulls the proper image that contains the sprites as well as defines the height and width of the container. Next, we need to create a
\nclass that will display the given icon from the image. I like to break this out by icon type. Here are the classes I set up for this image.
\n
\n.person {background-position:0px 0px;}
\n.info {background-position:-68px 0px;}
\n.upload {background-position:-136px 0px;}
\n.document {background-position:0px -68px;}
\n.check {background-position:-68px -68px;}
\n.cart {background-position:-136px -68px;}
\n<\/code>
\nThe final step to get these to display is to create the containers. We need to create six separate containers and add the proper classes. Here are the divs we will use to display the icons.
\n<div class=\"icon person\">
\n<\/div>
\n<div class=\"icon info\">
\n<\/div>
\n<div class=\"icon upload\">
\n<\/div>
\n<div class=\"icon document\">
\n<\/div>
\n<div class=\"icon check\">
\n<\/div>
\n<div class=\"icon cart\">
\n<\/div>
\n<\/code>
\nIn the above example, I have taken the class .icon and the class representing that icon and put them together in the class attribute. Using multiple classes is a great way to apply styles without having to repeat code in your CSS.
\nThe following screenshot shows you how the code to this point should render in a web browser:<\/p>\n