Animated Icons

There are instances where we need to animate the icons to have a fancy loading effect, which can be achieved without adding any additional animations.

Font Awesome has provided the below two classes to achieve rotation animation

  • Class fa-spin to apply an animation that rotates the icon continuously
  • Class fa-pulse to apply an animation that rotates the icon 8 steps

These animations are based on CSS3 animations, so these are not supported on IE8 - IE9.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="font-size: 20px;">    
    <h1>Animate Icons</h1>
    <div>
        <i class="fa fa-spinner fa-3x fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-3x fa-spin"></i>
        <i class="fa fa-refresh fa-3x fa-spin"></i>
        <i class="fa fa-cog fa-3x fa-spin"></i>
    </div>
    <div>
        <i class="fa fa-spinner fa-3x fa-pulse"></i>
        <i class="fa fa-circle-o-notch fa-3x fa-pulse"></i>
        <i class="fa fa-refresh fa-3x fa-pulse"></i>
        <i class="fa fa-cog fa-3x fa-pulse"></i>
    </div>
</body>
</html>

Overall

Font Awesome Icons can be animated by just adding an additional class.

Related Links