Шрифт Awesome spinner иконы не вращаются

Я попытался добавить Шрифт Awesome иконки spinner на страницу, когда я нажимаю кнопку с помощью JQuery, однако прядильщики на самом деле не вращаются.

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>");
}

Ответ 1

добавление fa-spin в класс, как это будет работать:

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

Ответ 2

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

вы можете отсылать сюда больше примеров, похожих на шрифт

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

Ответ 3

Еще одно замечание в fa-spin заключается в том, что он не будет работать с элементом display: inline.

Он должен быть display: inline-block или display: block