Using CSS3 transforms/animations with font-face produces “wobbly” spinner gif-like

Question

I\'m using CSS transforms/animations with font-face (twitter bootstrap/font-awesome) to produce a spinner gif-like icon.

The problem is that the icon wobbles as it revol

Answer 1

Try setting a specific height and width on the element. Through trial and error, I found that adding:

#iconRepeatMain {
    width: 26px;
    height: 19px;
}

centers the font pretty well and seems to eliminate the wobbling. However, it's possible this is dependent on which browser is being used -- test it thoroughly.

http://jsfiddle.net/mblase75/pGhFX/13/