FontAwesome Icon On Hover Color Change With Animation

Topic: FontAwesome Icon On Hover Color Change With Animation

ParZiVal987 pro asked 6 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>

Add comment

ParZiVal987 pro answered 6 years ago

0 0 Best answer

Hey guys, if anyone will need the answer for this here you go: HTML: <a class="" data-toggle="tooltip" data-placement="top"> </a> <a class="" data-toggle="tooltip" data-placement="top"> </a> 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 6 years ago

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

imyke commented 6 years ago

Figured it out.

Add comment

jkdfh answered 5 years ago

0 0 Best answer

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 5 years ago

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

Marta Szymanska staff pro premium commented 5 years ago

Hi,

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

Best, Marta

Add comment

Write

Create snippet

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

ParZiVal987

Pro User

26Support score
4Questions 1Answers

0Snippets likes 0Snippets