Rotating Glyphicons / Font Awesome in Bootstrap

Question

I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).

Here's my attempt: http://jsfiddle.net/young_greedo17/88g5P/

...which uses this code:

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

... here's the CSS:

.widgetbox {
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    text-align: center;
}
.widgetbox [class*="icon-"] {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
    color: #24a159 !important;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

Here's an example of what I'm looking to happen on hover (see four column widget box ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Obviously, the color changes, but even that doesn't change in accordance with the parameters I'm setting for the transition in the CSS.

Thanks!

Answer 1

New Font awesome introduced rotate notation (run code snippet below to see it in action) http://fontawesome.io/examples/

Just add a MODIFIER CLASS from fa-rotate-90 (90 or 180, 270) and fa-flip-horizontal (horizontal or vertical).

<i class="fa fa-head-side-mask"></i>normal<br>
<i class="fa fa-head-side-mask fa-rotate-90"></i>
<i class="fa fa-head-side-mask fa-flip-horizontal"></i>
<i class="fa fa-head-side-mask fa-rotate-90 fa-flip-horizontal"></i>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<br>Normal:<br>

    <i class="fa fa-head-side-mask"></i>normal<br>

<br>Rotated:<br>

    <i class="fa fa-head-side-mask fa-rotate-90"></i>fa-rotate-90<br>
    <i class="fa fa-head-side-mask fa-rotate-180"></i>fa-rotate-180<br>
    <i class="fa fa-head-side-mask fa-rotate-270"></i>fa-rotate-270<br>
    
<br>Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-head-side-mask fa-flip-vertical"></i>  fa-flip-horizontal<br>
    
    
<br>Rotated and Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-vertical fa-rotate-90"></i>fa-flip-vertical fa-rotate-90