如何让 Font Awesome 图标在点击时停止旋转？

Question

我希望这个箭头在页面加载时旋转，然后当有人点击它时，它会暂停动画。我该怎么做？

<i class="far fa-arrow-alt-circle-up fa-7x fa-spin"></I>

Answer 1

欢迎来到 SO Morgan。

为此，您需要使用以下方法 JavaScript 来停止图标旋转：

function stopSpinning() {
  var element = document.getElementById("arrowIcon");
  element.classList.remove("fa-spin");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i id="arrowIcon" class="fa fa-car fa-spin" onclick="stopSpinning()"></i>

请注意，我在我的示例中使用了 fa 和 fa-car，因为这是一个 FontAwesome 图标，将在代码片段中运行。

Answer 2

或者您可以在不创建任何函数的情况下内联：

<i id="arrowIcon" class="fa fa-car fa-spin" onclick="this.classList.remove('fa-spin')"></i>

如何让 Font Awesome 图标在点击时停止旋转？

How can I make a Font Awesome Icon Stop spinning on Click?

fonts

animation

font-awesome

font-awesome-5