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.

Also read:

• 15 Most Useful Online Tools and Generators for Web Developers and Bloggers
• How My Website Looks With Various Google Fonts? [Test Drive Google Fonts]

How to Animate Font Awesome Icons

“Font Awesome Animation” is a small CSS library that let you animate Font Awesome icons, here is how to use Font Awesome Animation CSS library in your website-

1. Download the Font Awesome Animation CSS library and place it in your project’s CSS folder
2. Include the library in your index.html or header.php as follows
   <link rel="stylesheet" href="css/font-awesome-animation.min.css">

3. 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.

• CSS
• How To
• HTML