title: Bootstrap align icon to leftside of button
body: <p>I have a bootstrap 3 button and it's using font awesome for the icons. I am trying to Center the text on the button but have the icon aligned to the left side.</p>
  
  <pre><code>&lt;button type="button" class="btn btn-default btn-lg btn-block"&gt;
    &lt;i class="fa fa-home pull-left"&gt;&lt;/i&gt; Home
  &lt;/button&gt;
  </code></pre>
  
  <p>When I use <code>pull-left</code>, there is no padding or margin so the icon is too close to the edge (image 1).</p>
  
  <p><a href="https://i.stack.imgur.com/6wP2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6wP2k.png" alt="enter image description here"></a></p>
  
  <p>However, when I try to add a <code>margin-left</code> or <code>padding-left</code> to the icon, its moving the text over to the right as well (should remain center).</p>
  
  <p><a href="https://i.stack.imgur.com/FntT7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FntT7.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to not push the text over when using margins or padding on these icons?</p>