Font Awesome "Cog" spins unevenly

Question

We are using and adding/removing fa-spin on certain js events. The problem, which is easily visible at 3x, is that the cog does not spin around a fixed axis. I suspect this is because the icon itself (SVG) is reported by Chrome at 42 x 49 pixels, even though the image is visually square. Any suggestions to work around this issue?

It is subtle but noticeable: http://www.screencast.com/t/NwJTcKe4o

Answer 1

Same problem over here with the "fa-refresh" image. I was able to work around it by adjusting the origin point in my local CSS:

.fa-spin {
    -webkit-transform-origin: 35% 50%;
    -ms-transform-origin: 35% 50%;
    transform-origin: 35% 50%;
}

A hack, but it worked. Tested a few other icons and they too appeared "centred". But if you force a larger icon (fa-lg, fa-2x, etc) these numbers will need to be adjusted.

I'm not sure what causes it.