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

字体超赞图标在悬停时无需动画即可更改颜色

1 个答案: