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:

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 lookshow to add animated Font Awesome icons

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.



Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.


2 comments on “How to Animate Font Awesome Icons to Grab Visitors Attention
  1. 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.

Leave a Reply