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

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

看到这个：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;   
}