twitter-bootstrap 字体真棒微调器图标不旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31767701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font Awesome spinners icons not spinning
提问by Jascha Goltermann
I have tried to add a Font Awesomespinner iconsto a page when I click a button using Jquery, however the spinners does not actually spin.
当我使用 Jquery 单击按钮时，我尝试将Font Awesome微调器图标添加到页面，但是微调器实际上并没有旋转。
http://codepen.io/Riggster/pen/WvLZxb
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>");
}
回答by Jascha Goltermann
adding fa-spin to the class like this will work:
像这样将 fa-spin 添加到类中会起作用：
function NewNum() {
$("#num1").html("<i class='fa fa-refresh fa-spin'></i>");
}
回答by QFDev
Another thing to note with fa-spinis it won't work on a display: inlineelement.
另一件需要注意的事情fa-spin是它不适用于display: inline元素。
It needs to be display: inline-blockor display: block
它需要是display: inline-block或display: block
回答by AK-
function NewNum(){
$("#num1").html("<i class='fa fa-spinner'/>");
}
you can refer more font-awesome examples from here
你可以从这里参考更多字体很棒的例子
