title: Bootstrap 3 - Align font-awesome icon inside button vertically
body: <p>I am trying to align some font-awesome arrow vertically inside two Bootstrap buttons.</p>
  
  <p>Actually both the text and the icons should be vertically aligned in the middle of the button.</p>
  
  <p>If the text inside falls into a single line or wraps in multiple ones the arrow icon should always adjust to the middle of the total height of the button, if that makes sense.</p>
  
  <p>I've been trying to sort this one out for hours now but for the life of me I can't figure this out.</p>
  
  <p>Here's the markup:</p>
  
  <pre><code>    &lt;div class="container"&gt;
            &lt;div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"&gt;
              &lt;button type="button" class="btn btn-block btn-foo1"&gt;&lt;span&gt; this is &lt;br&gt;button&lt;br&gt;one&lt;/span&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;button type="button" class="btn btn-block btn-foo2"&gt;&lt;span&gt;this is button two&lt;/span&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's a <a href="http://jsfiddle.net/9brbD/15/" rel="nofollow">jsFiddle</a> (<strong>updated</strong>) with what I currently have. Please note that the red background of the icons should touch the edges of the button (top/bottom/right) as opposed to what it is now.</p>