title: Bootstrap list with badges: put icon right to the badge
body: <p>I have a Twitter Bootstrap list with badges, and I have also added a delete icon I currently have two problems:</p>
  
  <ul>
  <li>The badge is automatically situated to the right of the list row, and I want the delete icon to be after and not before the badge (I think it would look better that way). I guess I'm going to need to redefine the badge style, but don't know how to do that.</li>
  <li>The delete icon is not vertically aligned correctly, and I haven't found the way to fix it either.</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;ul id="mylist" class="list-group"&gt;
          &lt;li id="item1" href="#" class="list-group-item"&gt;Item1   &lt;span id="badge" class="badge"&gt;5&lt;/span&gt;
      &lt;i class="fa fa-remove fa-2x pull-right" style="color: red;"&gt;&lt;/i&gt;
  
          &lt;/li&gt;
          &lt;li id="item2" href="#" class="list-group-item"&gt;Item2   &lt;span id="badge" class="badge"&gt;-10&lt;/span&gt;
      &lt;i class="fa fa-remove fa-2x pull-right" style="color: red;"&gt;&lt;/i&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/r77wkzcg/1/" rel="nofollow">Here is a JSFiddle</a> with a small example of my situation.</p>
  
  <p>Any help?</p>