How to animate Font Awesome icons using JS?

Question

So, I have seen a lot of you guys working with "designed icons" using span or JQuery libraries, but i'm using Font Awesome icons and I cannot make this one works.

I'm just trying to make as simple as possible using the toggleClass JS, so here it goes.

$(document).ready(function(){
 $('#menunav').click(function(){
  $(this).toggleClass('action');
 });
});

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
        cursor: pointer;
        -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
}

#menunav i{
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
}

#menunav .action i{
    -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="burguer-style.css">
    <!--font awesome library-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="jquery-1.11.3.js"></script>
    <script src="burguer-action.js" type="text/javascript"></script>
</head>
<body>
    <div id="menunav">
        <i class="fa fa-navicon"></i>
    </div>
</body>
</html>

Works the same way as no other character is placed between the two elements. — N. Ayancan, Mar 25 '16 at 04:19
No it does not because there is only 1 element with both the class and Id assigned. — Malk, Mar 25 '16 at 16:19

score 0 · Accepted Answer · answered Mar 24 '16 at 18:04

You are over thinking this, see fiddle: https://jsfiddle.net/36zo44md/

html

<div id="menunav">
  <i id="faIcon" class="fa fa-navicon"></i>
</div>

css

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

javascript

  $(document).ready(function() {
    $('#faIcon').click(function() {
      $(this).toggleClass('fa-rotate-90');
    });
  });

Overthink, the problem of my life. Thank you man, works just as I want to. — N. Ayancan, Mar 25 '16 at 04:16

How to animate Font Awesome icons using JS?

1 Answers1