fontawesome icon not spinning when unhidden with jquery

Question

hopefully an easy one.. i've searched around but couldnt find anything to solve this.

I am using a simple fontawesome icon which is hidden on document load. The spinner works fine if i am not hidding it, however, if i apply the hidden class to it then i use jquery to show it the icon is displayed but its no longer animated, just shows as static icon.

Is there a better way that I should be un-hiding this element to make the animation work ?

HERE IS THE CSS TO ANIMATE THE ICON

.icon-spinner {
    display: none;
}
.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

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

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

HERE IS THE HTML OF THE ICON INSIDE A BOOTSTRAP BUTTON

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-spinner load-animate icon-spinner"></i>
Action</button>

HERE IS THE JQUERY TO SHOW THE ICON BASED ON THE CLASS

$('.icon-spinner').show();

Answer 1

just wrap the icon with a span, and add the icon-spinner class to it.

demo fiddle - https://jsfiddle.net/ub4xk013/1/

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon-spinner"><i class="fa fa-spinner load-animate"></i></span>
Action</button>

hope that helps!