title: Issue making Bootstrap3 icon spin
body: <p>Inspired by <a href="http://fontawesome.io/examples/#animated-spinner" rel="noreferrer">Fontawesome</a>, I'm trying to make a spinning icon with bootstrap3. It's easily achieve via CSS3 transition and transform. Problem is the icon does not not rotate around the center. It swings while rotating. </p>
  
  <p>Code pasted below. Anyone know what causes the problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
  }
  @-moz-keyframes spin {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
   &lt;h1 class="text-center"&gt;
      &lt;span class="glyphicon glyphicon-refresh spin"&gt;&lt;/span&gt;
      &lt;span class="glyphicon glyphicon-record spin"&gt;&lt;/span&gt;
      &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>