Класс toogle js не меняет иконку

Question

Я пробовал этот переключатель JS, чтобы изменить значок при нажатии, но это не происходит. Что я здесь делаю не так.

Вот HTML

<div class="south-search-form">
 <form action="#" method="post">
   <input type="search" name="search" id="search" placeholder="Search for Ballet, Jazz, Policies ...">
   <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
 </form>
</div>

<!-- Search Button -->
<a href="#" class="searchbtn" style="font-size: 20px;">
<i class="fa" aria-hidden="true"></i></a>

Вот Js

  var searchbtnI = $(".searchbtn i");
  var searchbtn = $(".searchbtn");

  searchbtnI.addClass('fa-search');
  searchbtn.on('click', function () {
      $("body").toggleClass('search-close');
      searchbtnI.toggleClass('fa-times');
  });

Итак, если вы наблюдаете эту строку <i class="fa" aria-hidden="true"></i> в пределах <a> тег, я знаю, что этот тег должен быть обновлен до "X" с toogleClass в js. Но то, что я наблюдаю здесь, это то, что по какой-то странной причине тег <i> комментируется, когда я проверяю элемент на моем веб-сайте, поэтому он не меняется на другой значок. Почему это даже происходит?

Вот мой сайт: - https://dancestudiov2.herokuapp.com/homenew Вы можете проверить заголовок с иконкой поиска справа и осмотреть его, чтобы понять, о чем я говорю. Я очень ценю ваш вклад.

Спасибо

Answer 1

Запустите этот фрагмент кода, я использую ваш код без каких-либо изменений, значок не изменился на SVG, потому что я использую только CSS-файл с потрясающими шрифтами, проверьте код на JS-библиотеку с потрясающими шрифтами и удалитеэто, вы найдете эту строку в вашем HTML:

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

var searchbtnI = $(".searchbtn i");
  var searchbtn = $(".searchbtn");

  searchbtnI.addClass('fa-search');
  searchbtn.on('click', function () {
      $("body").toggleClass('search-close');
      searchbtnI.toggleClass('fa-times');
  });

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="south-search-form">
 <form action="#" method="post">
   <input type="search" name="search" id="search" placeholder="Search for Ballet, Jazz, Policies ...">
   <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
 </form>
</div>

<!-- Search Button -->
<a href="#" class="searchbtn" style="font-size: 20px;">
<i class="fa" aria-hidden="true"></i></a>