FontAwesome Icon On Hover Color Change With Animation


Topic: FontAwesome Icon On Hover Color Change With Animation

ParZiVal987 pro asked 4 years ago

Hey Guys I can't find the answer to my question on the internet.
Basically, I'd like one of the icons to turn red with like a transition
effect when I hover over it with my mouse. By the way I couldn't choose
the correct version for mdb, because I use 4.5.10, but that wasn't available,
when I was writing this question. 

<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
 <i class="fa fa-heart grey-text ml-3"></i>
</a>
 </span>

ParZiVal987 pro answered 4 years ago

Hey guys, if anyone will need the answer for this here you go: HTML: <span class="float-right"> <a class="" data-toggle="tooltip" data-placement="top"> <i class="fa fa-eye ml-3 kekszemecskehover"></i> </a> <a class="" data-toggle="tooltip" data-placement="top"> <i class="fa fa-heart ml-3 pirosszivecskehover"></i> </a> </span> So basically the difference is I added "pirosszivecskehover" and "kekszemecskehover" classes to the i elements. piros is for the heart icon and kek is for the eye one. CSS: .pirosszivecskehover { color: #9e9e9e; -webkit-transition: color 750ms; -moz-transition: color 750ms; -ms-transition: color 750ms; -o-transition: color 750ms; transition: color 750ms; } .pirosszivecskehover:hover { color: #e31b23; } .kekszemecskehover:hover { color: #4652a2; } .kekszemecskehover { color: #9e9e9e; -webkit-transition: color 750ms; -moz-transition: color 750ms; -ms-transition: color 750ms; -o-transition: color 750ms; transition: color 750ms; } Enjoy everyone! :)

imyke commented 3 years ago

Thanks. Not sure how to use fontawesome pro with my mdbvue project though.


imyke commented 3 years ago

Figured it out.


jkdfh answered 2 years ago

Hello Guys I have one icon of user and i want change color on hover but i have don't any solution and i search from google but i not found it if any one hear so please help me.


lemons commented 2 years ago

here is a simple snippet: https://mdbootstrap.com/snippets/jquery/lhock/1631372


Marta Szymanska staff pro premium commented 2 years ago

Hi,

thanks @lemons for your help. Do you need more help @jkdfh?

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No