点击切换字体真棒图标？

Question

我正在尝试在单击（和返回）时将 fa-bars 图标更改为 fa-times 图标。我到处寻找类似的解决方案，但我似乎无法正确解决。

HTML+jQuery

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

<a href="#" class="toggle-nav js-nav"><i class="fa fa-bars fa-lg"></i></a>

<div class="nav-wrap">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $('.js-nav').click(function(){
    $(this).parent().find('.menu').toggleClass('active');
        })
});
</script>

DEMO: navigation bar

谢谢

Answer 1

尝试以下方法，告诉我你的进展情况。

$( document ).ready(function() {
    $('.js-nav').click(function(){
$(this).parent().find('.menu').toggleClass('active');
$(this).find('i.fa').removeClass('fa-bars').addClass('fa-times');
    })
});

点击切换字体真棒图标？

Toggle font awesome icon on click?

jquery

fonts

toggle

font-awesome