title: Font Awesome menu icon has 1px offset
body: <p>I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).</p>
  
  <p>Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).</p>
  
  <p>But the icon seems to have an extra 1px on top. </p>
  
  <p>I'm using Chrome, and I've reproduced the issue for you guys to look at.</p>
  
  <pre><code>&lt;i class="fa fa-bars"&gt;&lt;/i&gt;
  
  i {
      width: 48px;
      height: 48px;
      margin-top: 24px;
      box-sizing: border-box;
      border: 2px solid #555;
      border-radius: 50%;
  }
  .fa-bars {
      color: #555;
      font-size: 24px;
      text-align: center;
      line-height: 48px;
  }
  </code></pre>
  
  <p>You can view the result: <a href="http://jsfiddle.net/thecornishninja/jK8rD/" rel="nofollow">http://jsfiddle.net/thecornishninja/jK8rD/</a></p>
  
  <p>See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.</p>
  
  <p>I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.</p>
  
  <p>It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.</p>