Question

假设我有3个FA图标：

<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>

我想将所有这些更改为：

<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>

这意味着我正在修改这些图标的所有前缀，以使它们从固定变为常规。

在FA 4.X之前，我只能按类名称获取所有图标，并像这样切换它们的类：

var icons = $(".icon");
icons.removeClass("fa-circle");
icons.addClass("fa-circle-o");

但是现在它们是SVG了，我不知道如何获取它们并更改其前缀。

我知道我可以这样更改前缀：

  if (prefix === 'fas') {

      icon.attr('data-prefix', 'far');
      icon.css({ color: "#d6d6d6" });
  } else {

      icon.attr('data-prefix', 'fas');
      icon.css({ color: "#3fcf8e" });
  }

我只需要知道如何获取所有图标，就可以遍历它们并更改其前缀。

Answer 1

据我了解...
您始终可以使用代码来完成此操作，只需将fas替换为far：

var icons = $(".icon");
icons.removeClass("fas");
icons.addClass("far");

// Note that this could be simplified to:
// icons.toggleClass('far fas');

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

fas: <i class="fas fa-circle"></i>  
far: <i class="far fa-circle"></i>
<br><br>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>

希望有帮助。

Answer 2

我刚刚意识到我可以更改具有特定类的所有内容的data-prefix属性。

$(".icon").attr('data-prefix', 'far');

将具有特定类的所有字体真棒5个图标更改为另一个FA图标-JS / SVG

2 个答案: