title: Changing the css sprite position of an icon tag
body: <p>I am trying to change the background position of the icon tag on hover. How can I do this if it's in an icon tag instead of the a tag?</p>
  
  <p>The html icon tag is:</p>
  
  <pre><code>&lt;a class="info" href="#"&gt;&lt;i class="tag"&gt;&lt;/i&gt; Info&lt;/a&gt;
  &lt;a class="info" href="#"&gt;&lt;i class="other_tag"&gt;&lt;/i&gt; Other Info&lt;/a&gt;
  </code></pre>
  
  <p>The CSS is: </p>
  
  <pre><code>.tag {
      background: url('images/tag.png') no-repeat 0 0;
      width: 13px;
      height: 13px;
      display: inline-block;
  }
  
  .other_tag {
      background: url('images/other_tag.png') no-repeat 0 0;
      width: 13px;
      height: 13px;
      display: inline-block;
  }
  
  .info {
      color: #6a9d2b;
      position: relative;
      left: 10px;
      text-decoration: none;
      line-height: 20px;
  }
  
  .info:hover {
      background-position: 0 -13px;
      color: #4a6e1e;
  }
  </code></pre>
  
  <p>The icons width are actually 13px in width and 31px in height. </p>