title: Toggle font awesome icon on click?
body: <p>I'm trying to change the fa-bars icon with fa-times icon on click (and back). I looked all over for a similar solution, but I can't seem to get it right.</p>
  
  <p><strong>HTML+jQuery</strong></p>
  
  <pre><code>    &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  
  &lt;a href="#" class="toggle-nav js-nav"&gt;&lt;i class="fa fa-bars fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;div class="nav-wrap"&gt;
    &lt;nav class="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Works&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $( document ).ready(function() {
          $('.js-nav').click(function(){
      $(this).parent().find('.menu').toggleClass('active');
          })
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong><a href="http://jsbin.com/xulirapamo/edit?html,output" rel="nofollow">DEMO: navigation bar</a></strong></p>
  
  <p>Thanks</p>