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

Question

当我使用Jquery单击按钮时，我尝试向页面添加Font Awesome spinner icons，但旋转器实际上并没有旋转。

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

fa-spin要注意的另一件事是它不会在display: inline元素上工作。

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

Answer 3

{{1}}

你可以从这里引用更多字体真棒的例子

http://fortawesome.github.io/Font-Awesome/icon/spinner/