字体真棒图标在没有动画的情况下在悬停时改变颜色

Question

我遇到了字体真棒图标在没有动画的情况下在悬停时更改颜色的问题。当用户将鼠标悬停在图标上时，我希望图标改变它的颜色以改变靛蓝、蓝色和红色，而不会从底部出现彩色图标的动画（忘记了动画类型名称）。

<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>

非常感谢您的帮助。

注意：我已经检查过Change color when hover a font awesome icon?

Answer 1

试试这个 Css 代码。

.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;
}