title: css sprite for text links
body: <p>I am trying to use an image with a bunch of icons for some text links I have in an unordered list, but failing to only show 1 icon with space on the side of it for the text. Here is what I have:</p>
  
  <p><a href="http://jsfiddle.net/XyVtq/2/" rel="nofollow">http://jsfiddle.net/XyVtq/2/</a></p>
  
  <p>my css:</p>
  
  <pre><code>#head_about {    background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    width: 9px;    height: 18px; display:block; margin-left:20px;  }​
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;ul&gt;
          &lt;li&gt;&lt;a id="head_about" href="test.html" &gt;About Us&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;​
  </code></pre>
  
  <p>if I add left padding it reveals more icons in the total image. Is there a way to </p>