如何在菜单打开时替换其图标？
这里是我的页面，这是左菜单：
https://www.s1biose.com/boutique/ma-boutique-pro
我在主题的JS文件中添加了以下代码，但它不起作用：

$('#navbar-collapse-first').on('show.bs.collapse', function () {
       $(this).find('.navbar-toggle-first svg').removeClass("fa-bars").addClass("fa-times");
  });

  $('#navbar-collapse-first').on('hide.bs.collapse', function () {
       $(this).find('.navbar-toggle-first svg').removeClass("fa-times").addClass("fa-bars");
  });

下面是我的菜单代码：

<a class="navbar-toggle-first-link" data-toggle="collapse" data-target="#navbar-collapse-first">
  <span class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first">
    <span class="fa-layers fa-3x">
      <i class="far fa-circle"></i>
      <i class="fas fa-bars" data-fa-transform="shrink-6"></i>
    </span>
  </span>
</a>