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

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

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);
    }
}

FontAwesome














Glyphicons