title: Bootstrap - How to use icons in lists/tabs?
body: <p>I'm trying to get a couple of effects in Twitter Bootstrap but I'm struggling, and I'm sure it must have been done before. Both are quite similar so I've rolled into a single question.</p>
  
  <p>What I want to do is get Icons working within both a list and a navbar. A quick illustration of each effect I'm trying to achieve via a bit of painting:</p>
  
  <p><strong>List</strong></p>
  
  <p><img src="https://i.stack.imgur.com/K6wce.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="well span4"&gt;
     &lt;ul class="nav nav-list"&gt;
         &lt;li class="active"&gt;&lt;a href="#"&gt;Value 1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Value 2&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Value 3&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried including <code>&lt;img&gt;</code> and <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code> all with the <code>class="close"</code> but none seemed to work properly, the nearest I could get to was having them display on the next line.</p>
  
  <p><strong>Nav Bar</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Xf53o.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="navbar"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container" style="width: auto;"&gt;
                  &lt;a class="brand" href="#"&gt;NavBar&lt;/a&gt;
                  &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                          &lt;li class="active"&gt;
                              &lt;img src="edit.png" width="16" height="16"/&gt;
                              &lt;a href="#"&gt;Nav 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src="play.png" width="16" height="16"/&gt;                               
                              &lt;a href="#"&gt;Nav 2&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I want here is to display the two icons beside the navbar items (and within the active region for the first navbar item). Similar sort of problem as the list, the image gets pushed above this time. I've photoshopped the Nav2 to illustrate the effect I want to achieve. </p>
  
  <p>I've tried <code>&lt;img&gt;</code>, and I did try an <code>&lt;i&gt;</code> but I believe these are magic somehow and always point to some sort of glyph icons - I need to go read about these. What I really want is to use use custom images here.</p>
  
  <p>Any suggestions / little examples would be great. Thanks.</p>