如何让Font Awesome字体图标转动?

 2018-10-22 16:56:16  350 人阅读  3 条评论
 最佳答案:

Font Awesome 字体图标转动

使用 class fa-spin 可以使任何图标执行旋转动画,使用 class fa-pulse 可以使图标以 8 步为周期进行旋转。可以完美执行旋转动画的图标有:fa-spinner,fa-refresh 和 fa-cog。具体代码如下:

<i class="fa fa-spinner fa-spin">
<i class="fa fa-circle-o-notch fa-spin">
<i class="fa fa-refresh fa-spin">
<i class="fa fa-cog fa-spin">

说明:

  • 以上代码中的 fa-spin 可以改为 fa-pulse,同样是转动,感觉就是转动速度不一样。
  • 某些平台和某些浏览器上执行图标动画会发生不正常的晃动,CSS3 动画不支持 IE8-IE9 浏览器。

答案来自:小珊迪的博客 - http://blog.sina.com.cn/s/blog_7cfac5730102wo3s.html

站长有话说

Boke112 导航一直以为Font Awesome 字体图标是不能转动的,所以本站首页的最新评论站点前面的那个“圈圈”一直都不转动,也有很多站长反馈,但是一直都没有解决,直到今天『Young 杨小杰博客』博主告知才知道可以直接添加 fa-pulse 让 Font Awesome 字体图标转动,在这里特别感谢『Young 杨小杰博客』博主的指导。

您可能感兴趣的文章

问题标签: ,  更多问题标签>>
编辑作者:懿古今(QQ号:2226524923,QQ群:415623933
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  建站技术问题 ,  操作系统问题 ,  办公软件问题 ,  搜索热点问题 ,  综合其他问题
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 云顶天的博客
    云顶天的博客 @回复

    果然首页回访的转起来了~~就是有点密集恐惧···

  2. 雅兮网
    雅兮网 @回复

    fontawesome字体库是一个字体框架,里面写好了CSS样式,添加一个class类,就给它赋予了一个动画,而这个动画是提前在CSS里用CSS3写好的

    • 懿古今
      懿古今2018-10-22 17:34  回复

      @雅兮网是的,原先我一直都不懂,原来这个fontawesome字体库这么强大,感觉又学到一招。图标动起来确实比较好