将具有特定 class 的所有 font awesome 5 图标更改为另一个 FA 图标 - JS/SVG

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 之前，我可以通过它们的 class 名称获取所有图标并像这样切换它们的 classes:

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

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

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

将具有特定 class 的所有 font awesome 5 图标更改为另一个 FA 图标 - JS/SVG

Change all font awesome 5 icons with a specific class to another FA icon - JS/SVG

javascript

jquery

font-awesome

font-awesome-5