时间戳

首页 > 解决方案 > 将具有特定类的所有字体真棒 5 图标更改为另一个 FA 图标 - JS/SVG

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

问题描述

假设我有 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" });
  }

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

标签： javascriptjqueryfont-awesomefont-awesome-5

解决方案

据我了解......<br>您始终可以使用您的代码来完成，您只需替换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>

希望能帮助到你。

推荐阅读