Home/ Questions/Q 5838355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T11:27:32+00:00

I have created a sprite which includes a whole set of icons which I

  • 0

I have created a sprite which includes a whole set of icons which I use in my web application. However, I have run into a problem when styling links. I know with CSS I can manipulate the size of the link and move its background image (the sprite) around, so I only display the icon I want within the sprite. This works great for links with no text. However, if I have a link with a background image and additional text, that is where I run into problems.

Take a look at these images, which will explain my dilemma:

I know I can “clip” the background image in CSS3, but I am trying to avoid that at this point, because I know mainly older browsers [like IE8 X(] will be accessing the site, and won’t see this change. Is there a way to do this without placing an additional tag, such as a <span> tag inside of each link and styling those? I’ve seen examples where I can use an AJAX library, like jQuery, to help with this, but that is alot of sweat for a small task.

I hope that wasn’t confusing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to put blank space in your sprite where you need to. That should do the trick.
    Just like this one > http://css-tricks.com/wp-content/csstricks-uploads/youtube-sprite.png

    • 0