title: Aligning text in a button
body: <p>I need to make buttons with icons on the left and I found a great example on here about it. But no matter how much I edit it, the text inside won't align vertically. I'm using Bootstrap 4, by the way. Someone help?</p>
  
  <p>Here's the original <a href="https://jsfiddle.net/mr6nt5no/4/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>And here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    text-align: center;
    font-size: 0.7em;
    text-transform: uppercase;
    background: #42473d;
    padding: 1em 0.5em;
    color: #fff;
  }
  
  .btn-primary:before {
    font-family: 'FontAwesome';
    font-size: 2em;
    width: (18em / 14);
    float: left;
    margin: -0.5em -0.2em;
    padding: 0.3em 0.6em;
    background-color: #292c26;
    content: "\f230";
  }
  .btn-secondary:before {
    font-family: 'FontAwesome';
    font-size: 2em;
    width: (25em / 14);
    float: left;
    margin: -0.5em -0.2em;
    padding: 0.3em 0.6em;
    background-color: #292c26;
    content: "\f179";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;button class="btn btn-block rounded-0"&gt;
      View Using Facebook
  &lt;/button&gt;
  &lt;button class="btn btn-block rounded-0"&gt;
      View Using Facebook
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>