如何更改字体真棒图标悬停颜色？

Posted 2023-02-22

【中文标题】如何更改字体真棒图标悬停颜色？

【英文标题】：How to change font awesome icon hover color?

【发布时间】：2016-04-08 09:21:37

【问题描述】：

目前我的 html 是这样的：

<div class="col-md-4 text-center">
  <i class="fa fa-2x fa-facebook wow bounceIn social"></i>
  <i class="fa fa-2x fa-twitter wow bounceIn social"></i>
  <i class="fa fa-2x fa-google-plus wow bounceIn social"></i>
</div>

我尝试执行以下 CSS，但没有任何反应：

fa-facebook:hover 
  color: #006b33;

我对字体真棒完全陌生，所以任何帮助将不胜感激！

【问题讨论】：

看起来您缺少... .fa-facebook 是一个类，因此选择器应该是.fa-facebook:hover。它在这里工作 - jsfiddle.net/k5n8755t

How to style icon color, size, and shadow of Font Awesome Icons的可能重复

对不起，我完全错过了关键字hover...我撤回了我的近距离投票

【参考方案1】：

你打错了 - fa-facebook 需要在它前面加上 .，因为它是一个类选择器。

.fa-facebook:hover  ... 

【参考方案2】：

随便写——

.fa-facebook:hover 
    color: #006b33;

由于您使用的是“类”，因此您忘记在类名前写“.”（点）。

如果它是一个“id”，则使用“#”（哈希）而不是点。其余的都是一样的。