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

Font Awesome has a nice convenient way of getting an icon to spin:

http://fortawesome.github.io/Font-Awesome/examples/

Answer 2

Non of the above worked for me but this:

.spin {
        animation: spin infinite 4s linear;
        height: 80px;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

Answer 3

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/

Answer 4

An additional point, if following this example.

The keyframe definitions need to allow for the case where some properties will be un-vendor prefixed and others won't. For example, in Chrome 35 the current keyframe definitions won't work as keyframes isn't vendor prefixed, but transform still is.

Something like this should allow for all current/future cases:

@-moz-keyframes spin
{
    from
    {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin
{
    from
    {
        -wekbit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Answer 5

Bootstrap provides you a defined class library to do that. Use "icon-spin" class along with your icon class For example:- <i class="icon-refresh icon-spin"></i>

Answer 6

I wrote a blog post about this. Simply reference the glyphicon with a custom class:

<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

The glyphicon-spin class was constructed by studying the fa-spin class in the FontAwesome stylesheet:

h4 {
    font-size:18px;
    font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-refresh fa-spin-custom"></i>

<br />
<br />

<h4>Glyphicons</h4>
 <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>