Issue making Bootstrap3 icon spin

Question

Inspired by Fontawesome, 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 aro

Answer 1

The issue is that you rotate an element which is not centered in your span.

If you want a real solution, add transform-origin on .spin to change the center of rotation

.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/