Font Awesome V4 - Animated Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to define Font Awesome Animated Icons using the predefined classes fa-spin and fa-pulse.

Run this on IDE

<!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

This example helps us understand how to create Font Awesome Animated Icons.

Related Links