Call images part by part using css sprites

[jinsejose]

In order to optimize the images at the bottom(social icons), I combined it into a single png file. http://techbee.in/wp-content/uploads/2014/09/social-icons.png .Individual icons are of size 70*70px and the new social-icons.png with 70*420 having 6 social icons. Can anyone help me out to write the css to call the image part by part from one new social-icons.png image?

http://techbee.in

[Tony @ AlphaBlossom]

Hello,

Change your html structure to look something like:

<a rel="nofollow" href="https://twitter.com/techbeenew" target="_blank" class="social-link twitter">Follow me on Twitter</a>

Then add this css to your theme's style.css file:

a.social-link {
    display: block;
    float: left;
    height: 70px;
    text-indent: -9999px;
    width: 70px;
}

// Hover effect - can use opacity, or different background image, etc.
a.social-link:hover {
    opacity: .7;
}

a.social-link.twitter {
    background: url(http://techbee.in/wp-content/uploads/2014/09/social-icons.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

For each link you'll have to position your background image by changing "0 0" to something like "0 -71px". That's very approximate, you'll have to adjust the -71 to position it exactly, and each icon link will be a larger negative number (-71px, -141px, etc)

That should get you going.

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jinsejose]

Thank you Tony for your help. It works. But, I am unable to position it correctly. Presently, first 5 social icons are in first line and last on the next line. I need help to configure 3 in the first line and next 3 on the other. <br> and <p> tags didn't work.

[Tony @ AlphaBlossom]

I thought the width of the container would allow them to line up 3 x 3, but it looks like that's not the case.

You can add "clear: left;" to a.social-link.pinterest and that will take care of it.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jinsejose]

That's it. Thank you once again.

[Tony @ AlphaBlossom]

Awesome...looks great. Glad I could help.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts