Using CSS Sprites on anchor tags

css css-sprites sprite
Karishma picture Karishma · May 18, 2011 · Viewed 9.1k times · Source

I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like :

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

etc.

So I replace with a sprite. I'm using 

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky.

Are there better options ? (nested span, div wrapper ?)

Answer

sandeep picture sandeep · May 18, 2011

@karishma: inline-block is a good option but if don't want it so, you can use the CSS below. 

a.sprite_img_a{
  background:url('image.jpg') no-repeat 0 0 ;
  float:left;
  display:block;
  width:30px;
  height:30px;
}
a.sprite_img_a:hover{
  background-position:-20px 10px ;
}

It's good to use icon image in background because 1) it saves markup space & 2) it's good for SEO purposes to avoid unwanted images caches by Google.

Related questions

Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default: Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that …

Read More
CSS: using image sprites with css pseudo classes :before and :after

I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px. I have an element that is either in a div.something …

Read More
Positioning background image on form element with CSS sprites

I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this: To position it, I've used these properties: #search-form input[type="text"] { …

Read More