字体真棒旋转器图标不旋转

Question

当我使用Jquery单击按钮时,我尝试向页面添加Font Awesome 微调器图标,但是微调器实际上并没有旋转.

http://codepen.io/Riggster/pen/WvLZxb

<li id="num1">
  <p>1:
    PHP Code for random number here
  </p>
</li>
<li>
  <p>
    <button class="btn btn-sm btn-default" onclick="NewNum()" type="button">Re-roll random numbers</button>
  </p>
</li>

function NewNum() {
  $("#num1").html("<i class='fa fa-refresh'></i>");
}

Answer 1

像这样将fa-spin添加到类中将起作用:

function NewNum() {
  $("#num1").html("<i class='fa fa-refresh fa-spin'></i>");
}

Answer 2

警报！！！

有时，即使代码很好，你的电脑设置也可能是罪魁祸首。

如果您在窗口中实际看到任何形式的动画，请确保打开动画。如果您在 Windows 中，可以通过以下方式更改设置。

1.在windows中搜索showanimation

2. 向下滚动，您会看到一个用于显示或不显示动画的单选按钮。

块引用

Answer 3

要注意的另一件事fa-spin是，它不适用于某个display: inline元素。

它必须是display: inline-block或display: block