title: How do I create an unordered list with inline images replacing the text
body: <p>I'm trying to set up two logos side-by-side (i.e. inline) from an unordered list.  The logo images should replace the text links.  </p>
  
  <pre><code>&lt;footer&gt;
  &lt;ul id="footer-social" class="pull-right"&gt;
      &lt;li class="footer-facebook"&gt;&lt;a href="#"&gt;Become a Facebook Fan&lt;/a&gt;&lt;/li&gt;
      &lt;li class="footer-twitter"&gt;&lt;a href="#"&gt;Follow us on Twitter&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/KKd6K/1/" rel="nofollow">http://jsfiddle.net/KKd6K/1/</a></p>
  
  <p>Any help would be appreciated.</p>