title: Why Bootstrap's Glyphicons sized at 24px are rendered as 26px height
body: <p>I'm doing 'pixel shifting' in my css and after struggling for some time i noticed that root cause of my problems is 'Glyphicons Halflings' font included with bootstrap. I'm trying to render my icon like following</p>
  
  <pre><code>&lt;style&gt;
  .size24 {
     font-size: 24px;
     background-color: red;
  }
  &lt;/style&gt;
  &lt;span class="glyphicon glyphicon-trash size24" &gt;&lt;/span&gt;
  </code></pre>
  
  <p>but it is actually rendered as 26px height. What is the reason and how it can be fixed? Is this the bug in font? How to make my icon to be exactly 24px*24px?</p>
  
  <p>This appears with bootstrap 3.0.2.</p>
  
  <p>Here is jsfiddle for that case <a href="http://jsfiddle.net/U8bLZ/2/" rel="nofollow noreferrer">http://jsfiddle.net/U8bLZ/2/</a> and sample screenshot
  <img src="https://i.stack.imgur.com/7vh4t.png" alt="sample screenshot"></p>
  
  <p>Enlarged portion to of 3 to 5
  <img src="https://i.stack.imgur.com/CIDKX.png" alt="enter image description here"></p>