单击元素时更改 fontawesome icon/class

Question

我有一个图标

单击时，我想将其更改为类以便变为 

所以基本上删除 fas 并添加 far，如果再次单击则反之亦然。

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');
  });
});

知道为什么类没有被切换吗？

Answer 1

 元素在与 far / fas 一起使用时基于 fa-* class 替换为 svg 元素，并且它们包含 class 此类：svg-inline--fa fa-times-circle fa-w-16。这就是 class 切换代码不起作用的原因

更好的解决方案是在点击时显示/隐藏相应的图标。

Answer 2

您正在使用带有 JavaScript 的超棒版本 SVG，它替换了  标签（和其他标签），这些标签与一组条件匹配 <svg>

所以，在你的情况下，将 data-prefix attr 更改为 fas 或 far

这里有一个完整的例子

$(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>

单击元素时更改 fontawesome icon/class

Change fontawesome icon/class when element is clicked

javascript

jquery

font-awesome