If you want to add animated icon on your website or web app and don’t want to create and write manually animation script then here i am going to share awesome CSS based library which help you to convert static fontawesome icon into cool animated icon on different action. you just only need to call fontawesome library with font-awesome-animation.css all done and call animation class on icon which you need to apply animation on DOM Load or mouse hover.
Add Animated FontAwesome Icon on Your Web App Using Pure CSS3
First include font awesome library on page after that add font-awesome-animation minified library.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css">
Apply icon animation on DOM load.
<i class="fa fa-bell faa-ring animated"></i>
Apply icon animation on hover
<i class="fa fa-bell faa-ring animated-hover"></i>
Apply icon animation on parent hover
<a href="#" class="faa-parent animated-hover"> <i class="fa fa-bell faa-ring"></i> faa-ring </a>
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.