Changement de l'icône/classe de fontawesome lorsque l'élément est cliqué

Question

J'ai une icône <i id="test" class="fas fa-times-circle"></i>

En cliquant dessus, j'aimerais changer ses classes pour qu'il devienne <i id="test" class="far fa-times-circle"></i>

Donc, en gros, supprimez fas et ajouter far ou vica versa si vous cliquez à nouveau.

https://jsfiddle.net/bobbyrne01/ptsgba1h/7/

HTML :

<i class="fas fa-times-circle"></i>
<i class="far fa-times-circle"></i>
<hr/>

<div>
  <i id="test" class="fas fa-times-circle"></i>
</div>

Javascript :

$(document).ready(function() {
  $('#test').on('click', function() {
    console.log(this);
    $(this).toggleClass('fas');
    $(this).toggleClass('far');
  });
});

Une idée de la raison pour laquelle les classes ne sont pas basculées ?

Answer 1

Vous utilisez la version géniale de SVG avec JavaScript qui remplace <i> (et d'autres) correspondant à un ensemble de critères à l'aide de la fonction <svg>

Donc, dans votre cas, changez data-prefix attr à être fas Ou far

Voici un exemple complet

$(document).ready(function() {
  $(document).on('click','#test', function() {
    console.log(this);
    //$(this).data("prefix",$(this).data("prefix")== 'fas' ? 'far' : 'fas')
    $(this).attr("data-prefix", function(index, attr){
      return attr == 'fas' ? 'far' : 'fas';
      })
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<i class="fas fa-times-circle"></i>
<i class="far fa-times-circle"></i>
<hr/>

<div>
  <i id="test" class="fas fa-times-circle"></i>
</div>

Answer 2

En <i> sont remplacés par des éléments svg sur la base des éléments fa-* lorsqu'elle est utilisée avec far / fas et ils contiennent des classes de ce type : svg-inline--fa fa-times-circle fa-w-16 . C'est la raison pour laquelle le code de basculement de classe ne fonctionne pas.

Une meilleure solution serait d'afficher ou de masquer l'icône appropriée en cas de clic.