How can create transition effect in font awesome icon

Question

I need solution for this problem but it should be dependable in font-awesome icon.

please help me. to easy create font awesome icon transition effect when hover on icon

Solution

Fontawesome transitions could be done like any other CSS transition. You just need to set for them what properties will have this transition effect, and also define the "new" values.

For example:

.fa{
     font-size:30px;
     margin:5px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.fa:hover{
  font-size: 40px;
  transform: rotate(45deg);
}

In this example, on hover the icon will grow and will be rotated by 45 degrees.

Please read about transitions here: http://www.w3schools.com/cssref/css3_pr_transform.asp

You can see a live example here: http://jsfiddle.net/gn57dkez/