How to Animate Font Awesome Icons to Grab Visitors Attention

Font Awesome is one of the best CSS toolkits to add beautiful icons to your website, it has nearly 700 handcrafted icons to make your website more catchy, but is it possible to animate the font awesome icons? Yes, there is a tiny CSS library available to animate font awesome icons, which grabs visitors attention by animating the icons. People love to see some action on the website rather than still pictures and icons, so, let’s see how to add animated Font Awesome icons to your website.

Include the library in your index.html or header.php as follows<link rel="stylesheet" href="css/font-awesome-animation.min.css">

Now you are ready to use Font Awesome Animation library in your project, add the CSS classes to your font awesome icons to animate them as shown below <i class="fa fa-heart faa-pulse animated"></i>

Here is the demo of how font awesome animation looks

This library comes with 14 animations such as animated wrench, ringing bell, bouncing thumbs up, spinner, pulse, shake, tada and many others, you can find the full list of animations on this page. You can increase the speed of the animation by using faa-fast class or decrease it by appending faa-slow class to your icons. You can also use animated-hover class to animate the font awesome icons only on hovering them.

That’s it, this is how to animate font awesome icons and grab visitors attention. Do you any other useful resources related to font awesome icons? Please do share in comments.

except fa-animation, some libraries are also great for animating icons like fontawesome, for example loading.io made a loader-dedicated css animation library ( https://loading.io/animation/ ) and there is also animate.css that works for general purpose animation.