Rotate Font Awesome Icon On Click

Question

I\'m trying to make a Font Awesome chevron rotate 180º on click.

Here\'s the fiddle of JSFiddle that has what I\'ve tried so far. I also wanted it to spin around the cen

Answer 1

I believe it would be easier to do this with CSS transitions:

CSS

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery

$(".rotate").click(function(){
    $(this).toggleClass("down"); 
});

Demo fiddle