Enjoy the good life everyday!
关闭
欢迎来PyGo个人空间 ^_^
Bootstrap的动态icon | PyGo²

Bootstrap的动态icon

Bootstrap图标使用的是Font Awesome,加上基本的class可以产生动画效果,让页面看起来更加酷炫。

Bootstrap icon

实现代码:

1
2
3
4
5
6
7
8
9
10
11
<div class="fa-5x">
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-refresh fa-pulse"></i>
<i class="fa fa-cog fa-pulse"></i>
<i class="fa fa-spinner fa-rotate-90"></i>
<i class="fa fa-refresh fa-rotate-90"></i>
<i class="fa fa-cog fa-rotate-90"></i>
</div>

  • fa-spin:让icon图标不停的动态旋转
  • fa-pulse:图标以八步为周期进行旋转,比较适合表示刷新、加载等功能的图标,如.fa-spinner、.fa-refresh、.fa-cog等
  • fa-rotate-xx:图标以某个角度进行选择
  • fa-flip-horizontal:水平翻转
  • fa-flip-vertical:垂直翻转
  • fa-3x:图标大小的设置,有fa-x、fa-2x、fa-3x,想要多大有多大,使用默认大小fa-x居多
  • 本文作者:mingliang.gao【一个爱老婆Python程序猿。。。。。。】
  • 本文链接: http://pygo2.top/articles/63837/
  • 版权声明: 本博客所有文章欢迎转载,转载请注明出处!
觉得有帮助 请偶坐个公交车
0%