title: Rotate Font Awesome Icon On Click
body: <p>I'm trying to make a Font Awesome chevron rotate 180º on click.</p>
  
  <p>Here's the fiddle of <a href="http://jsfiddle.net/3v2egwfs/1/" rel="noreferrer">JSFiddle</a> that has what I've tried so far. I also wanted it to spin around the center so I used this other <a href="https://stackoverflow.com/questions/22908242/rotate-image-around-center-css3">thread</a>.</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;div class="fa fa-chevron-up"&gt;&lt;a href="#"&gt;^&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><b>CSS</b></p>
  
  <pre><code>.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);}
  } 
  </code></pre>
  
  <p><b>JS</b></p>
  
  <pre><code>$(".fa-chevron-up").click(function(){
   $(this).toggleClass("rotate")  ; 
  })
  </code></pre>