title: No Font-Awesome icons on buttons will vertical-align
body: <p>So I have this app with some buttons, that have some Font Awesome icons on them. These buttons are placed inside a Bootcards header.</p>
  
  <pre><code>&lt;button class="btn btn-primary pull-right "&gt;  
      &lt;i class="fa fa-pencil" &gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Now the problem is that it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/B5xg7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B5xg7.png" alt="Misplaced icon 1"></a></p>
  
  <p>Then I have this other one with text, which doesn't look right either:</p>
  
  <p><a href="https://i.stack.imgur.com/sG3ii.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sG3ii.png" alt="Misplaced icon 2"></a></p>
  
  <p>This one has the following HTML:</p>
  
  <pre><code>&lt;button class="btn btn-success" onclick="publishMessage()"&gt;
      &lt;i class="fa fa-check"&gt;&lt;/i&gt;
      Publiser
  &lt;/button&gt;
  </code></pre>
  
  <p>Now, after some googling around, I found that <code>vertical-align</code> should help me out, but it simply does nothing. All approaches I've found simply creates paddings or margins around the icon, so that it still touches the bottom of the button, but on a much bigger button.</p>
  
  <p>Since I'm not that familiar with this language, I wonder why just adding some CSS like <code>.fa {vertical-align: middle;}</code> (or with my own class name) does not work, and what I need to do.</p>
  
  <p><strong>UPDATE:</strong> Here's a <a href="http://jsfiddle.net/uz3tu23s/5/" rel="nofollow noreferrer">JSFiddle</a>. </p>