Question

44

Rotate Font Awesome Icon On Click

rated 0 times [ 50] [ 6] / answers: 1 / hits: 93246 / 10 Years ago, fri, october 3, 2014, 12:00:00

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 center so I used this other thread.

HTML

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

CSS

.rotate {

-webkit-animation: spin1 2s  linear;

-moz-animation: spin1 2s  linear;

-o-animation: spin1 2s  linear;

-ms-animation: spin1 2s  linear;

animation: spin1 2s  linear;



-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

transform-origin: 50% 50%;

width: 256px;

height: 256px;

}



@-webkit-keyframes spin1 {

0% { -webkit-transform: rotate(0deg);}

100% { -webkit-transform: rotate(180deg);}

}

@-moz-keyframes spin1 {

0% { -moz-transform: rotate(0deg); }

100% { -moz-transform: rotate(180deg);}

}

@-o-keyframes spin1 {

0% { -o-transform: rotate(0deg);}

100% { -o-transform: rotate(180deg);}

}

@-ms-keyframes spin1 {

0% { -ms-transform: rotate(0deg);}

100% { -ms-transform: rotate(180deg);}

}

@-keyframes spin1 {

0% { transform: rotate(0deg); }

100% { transform: rotate(180deg);}

}

JS

$(.fa-chevron-up).click(function(){

 $(this).toggleClass(rotate)  ; 

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 10 Years ago cullenmaxl · Accepted Answer

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