在 fontawesome SVG 中替换和动画图标

【问题标题】：Replacing and animating icon in fontawesome SVG在 fontawesome SVG 中替换和动画图标
【发布时间】：2018-09-16 12:58:38
【问题描述】：

在我切换到 FA SVG 之前，交换图标的工作非常简单——删除旧类，添加两个新类。使用 SVG 时，事情会稍微复杂一些，虽然我能够交换图标，但我无法对其进行动画处理......

HTML

<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

$(document).on("click", "#myButton", function() {
    $(this).find("svg").attr("data-icon", "spinner").removeClass("fa-check").addClass("fa-spinner disabled");
});

我错过了什么？

【问题讨论】：

标签： jquery svg font-awesome-5

【解决方案1】：

首先：为了更改数据属性，我建议使用.data()。

无论如何，您的问题与您忘记添加的类有关：fa-spin。

我建议使用.toggleClass()，而不是添加和删除类。

sn-p：

$(document).on("click", "#myButton", function(e) {
    var svg = $(this).find("svg");
    var newIcon = svg.data("icon") == 'check' ? 'spinner' : 'check';
    svg.data("icon", newIcon).toggleClass("fa-check fa-spinner fa-spin disabled");
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>


<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

【讨论】：