Click and rotate awesome icon

click-and-rotate-awesome-icon.markdown

Click and rotate awesome icon

A Pen by Benjamin Ashby on CodePen.

License.

index.html

<a href="#"><div class="fa fa-chevron-up rotate"></div></a>

script.js

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.rotate {
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.rotate.down {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />