0

I am having a problem with font awesome icons change it's color on hover without animation. I want the icon change it's color to change indigo, blue and red when user hovers on it without animation of appearing colored icon appear from bottom (forgot the animation type name).

<div class="clearfix">
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-facebook indigo" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-twitter blue" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn btn-icon btn-social btn-sm white no-radius no-borders">
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-google-plus red" aria-hidden="true"></i>
    </a>
</div>

I would really appreciate your help.

Note: I have already checked Change color when hover a font awesome icon?

Nodira
  • 656
  • 1
  • 9
  • 23

1 Answers1

0

Try this Css code. 

.fa-facebook, .fa-twitter,.fa-google-plus {
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}


.fa-facebook:hover, .fa-twitter:hover,.fa-google-plus:hover {
 color: indigo;
 -webkit-transition-property: none;
 -moz-transition-property: none;
 -o-transition-property: none;
 transition-property: none;
  animation-name: none;
}
Sakkeer A
  • 1,060
  • 1
  • 16
  • 39
  • Thank you so much for the answer! I will take into accaunt this kind of solution for future. But, for this one it seems to be many lines of code. . `.fa-facebook, .fa-twitter, .fa-google-plus{ transition: none; }` solved the problem. – Nodira Aug 09 '18 at 06:57
  • Yes. Blackheart's comment above `transition: none;` solved the problem. Thank you :) – Nodira Aug 09 '18 at 07:25