Bootstrap 字体不旋转的可怕旋转图标

oxiaedzo  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(3)|浏览(208)

我曾尝试在使用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>");
}
rdlzhqv9

rdlzhqv91#

向类中添加fa-spin,如下所示:

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

ulmd4ohb2#

关于fa-spin需要注意的另一件事是它不能在display: inline元素上工作。
它必须是display: inline-blockdisplay: block

gab6jxml

gab6jxml3#

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

你可以从这里参考更多的font-awesome范例
http://fortawesome.github.io/Font-Awesome/icon/spinner/

相关问题