title: Font Awesome's fa-spin spinning around wrong center
body: <p>I'm using this toggle menu template: <a href="http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle" rel="noreferrer">http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle</a> .</p>
  
  <p>I have replaced bootstraps glyphicon with font awesome's</p>
  
  <pre><code>fa fa-cog fa-spin
  </code></pre>
  
  <p>but the cog is spinning out of boundaries as if the center is not on the same line as the text. I can see that there is some issue with thesizing, but I cannot figure out where, any idea what am I doing wrong?</p>
  
  <p>JSFiffle: <a href="https://jsfiddle.net/vidriduch/mpw2r8h2/1/" rel="noreferrer">https://jsfiddle.net/vidriduch/mpw2r8h2/1/</a></p>