title: Adding icons to a Bootstrap dropdown
body: <p>I want to add some icons to links in a Bootstrap dropdown, using code like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Some Dropdown&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;&lt;a href="#"&gt;Up&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;&lt;a href="#"&gt;Down&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;i class="icon-arrow-left"&gt;&lt;/i&gt;&lt;a href="#"&gt;Left&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;i class="icon-arrow-right"&gt;&lt;/i&gt;&lt;a href="#"&gt;Right&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, the icons are out of place:</p>
  
  <p><img src="https://i.stack.imgur.com/watnK.png" alt="dropdown issue"></p>
  
  <p>I tried using the solution in <a href="https://stackoverflow.com/questions/11694866/twitter-bootstrap-icons-in-button-dropdown/11695326?noredirect=1#comment22712019_11695326">this answer</a>, but it doesn't seem to work. Can somebody provide a solution and explain why/how it works?</p>
  
  <p><a href="http://jsfiddle.net/ywkLt/" rel="noreferrer">Demo</a></p>
  
  <p>Thanks!</p>