html - 用于文本链接的 css sprite

Question

我正在尝试将带有一堆图标的图像用于我在无序列表中的某些文本链接，但未能仅显示 1 个带有空格的图标作为文本。这是我所拥有的:

http://jsfiddle.net/XyVtq/2/

我的CSS:

#head_about {    background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    width: 9px;    height: 18px; display:block; margin-left:20px;  }​

我的 html:

<ul>
        <li><a id="head_about" href="test.html" >About Us</a></li>
 </ul>​

如果我添加左填充，它会在整个图像中显示更多图标。有什么办法吗

Answer 1

我将 sprite 与内容分开，我通常在 html 中添加一个专用于 sprite 的图标标签，然后单独设置链接样式。

看这个:http://jsfiddle.net/XyVtq/1/

<ul id="header_pages">
  <li>
    <i id="icon"></i> <a id="head_about" href="<?php echo tep_href_link(FILENAME_ABOUT_US); ?>" >About Us</a>
  </li>
</ul>​

#icon {
  background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    
  width: 9px;    
  height: 18px; 
  display:inline-block
} 

li a {
   margin-left:18px;   
}