I have created animated Font-Awesome icons using animate.css.You can see the live preview by clicking here
If your are not familiar with the words – Font Awesome and animate.css, go through the below lines
What Is Font Awesome?
Font Awesome is “the iconic font” designed for use with Twitter Bootstrap. But You don’t have to use Twitter Bootstrap. Font Awesome can be used with any site or framework.
What Is Animate.css?
Animate.css is a simple CSS library that saves you from writing a few more lines of CSS to animate elements on your website. Actually that is pretty much it, and that’s exactly what makes it such an awesome library. It takes you not more than fifteen minutes to understand how it works, and another few minutes to have the skills necessary to apply it.
Using animate.css is very simple yet the results are phenomenal! You could either download the complete library or customize and build it to suit your needs. To start with, I would advice you to download the entire library so that you can play around with it and see which effect suits your needs the best.
First, we need to download animate.css and copy to CSS folder
Then add a link to animate.css like below
<link href="css/animate.css" rel="stylesheet">
Include the latest FontAwesome from a CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
To apply the animation you have to add .animated class to the element you want to animate, along with the animation name like so.
<div class="animated zoomIn"> <i class="fa fa-home"></i> </div>
Instead of zoomIn, you can use more than 50+ animation effect.
Here is the full source code of HTML and CSS that I have used in the live preview
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Font-Awesome Icons</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-sm-3">
<div class="icon-content animated zoomIn">
<i class="fa fa-html5"></i>
</div>
</div>
<div class="col-sm-3">
<div class="icon-content animated zoomIn">
<i class="fa fa-mobile"></i>
</div>
</div>
<div class="col-sm-3">
<div class="icon-content animated zoomIn">
<i class="fa fa-dashboard"></i>
</div>
</div>
<div class="col-sm-3">
<div class="icon-content animated zoomIn">
<i class="fa fa-edit"></i>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.icon-content{
background: #59d307 none repeat scroll 0 0;
border-radius: 61px;
color: #fff;
font-size: 50px;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 100px;
}
Me the big the fan of Font-Awesome and animate.css. If you started to use it, you will also 😎
