如何使 Font Awesome 图标在单击时停止旋转？答案

【问题标题】：How can I make a Font Awesome Icon Stop spinning on Click?如何使 Font Awesome 图标在单击时停止旋转？
【发布时间】：2019-11-08 02:48:43
【问题描述】：

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

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

【问题讨论】：

使用js。 onclick 删除类fa-spin.

标签： animation fonts font-awesome font-awesome-5

【解决方案1】：

欢迎来到 SO 摩根。

要实现这一点，您需要使用以下 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，因为这是一个将在代码 sn-p 中运行的 FontAwesome 图标。

【讨论】：

【解决方案2】：

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

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

【讨论】：