Support for icon rotation by properly aligning them to their vertical center

[darsain]

Now this is silly, and feel free to hit the close button :), but I wanted to use icon-refresh as a loading animation. I've created a .rotate class:

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate {
    display: inline-block;
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
}

Which, when applied to an icon, should make them rotate. The default icon styles however makes the animation wobbly due to icons not being in their exact vertical center.

The result with my quick-fix can be seen here: http://jsfiddle.net/RXMVN/ (from some reason icons don't load in other browsers than Chrome)

Do you feel like this is something worth chasing ? :)

[gregoryloucas]

Scroll to the bottom of this page:

http://fortawesome.github.com/Font-Awesome/test.html

And use the original repo until I update to 3.0.2:

https://github.com/FortAwesome/Font-Awesome

[darsain]

Awesome, thanks! Sorry for polluting issues :)