Hi

Bootstrap的动态icon

创建时间： 2021-08-01 | 分类于 Bootstrap | 阅读量：

本文字数： 964 | 阅读时长 ≈ 1 分钟

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

Bootstrap icon

实现代码：

<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居多