title: Center a glyphicon in a bootstrap button when font size is changed
body: <p>I'm trying to vertically and horizontally center a glyphicon with an increased font size inside of a Twitter Bootstrap v3 xs button. The icon is too high up and too far to the left. I've tried <code>vertical-align: middle</code> and <code>text-align: center</code> to no avail.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="btn btn-default btn-xs" type="button"&gt;
     &lt;span class="glyphicon glyphicon-pause"&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.glyphicon, .fas, .fa, .fab, .far, .fal {
      font-size: 15px;
  } 
  </code></pre>
  
  <p><a href="https://jsfiddle.net/tk5u6sng/10/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Edit: To be clear, the issue occurs with the font size of 15. </p>