CODEWITHSUNDEEP
iconstransitionfont-awesomeeffect
Ashik_Zia
Ashik_Zia

Reputation: 31

How can create transition effect in font awesome icon

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

Upvotes: 2

Views: 16784

Answers (1)

MorKadosh
MorKadosh

Reputation: 6006

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/

Upvotes: 7

Related Questions