如何为 Font Awesome 添加悬停效果？答案

【问题标题】：How do I add hover effect to Font Awesome?如何为 Font Awesome 添加悬停效果？
【发布时间】：2013-04-05 11:35:55
【问题描述】：

我有一些灰色的社交网站图标。当您将鼠标悬停在它们上方时，我希望它们更改为适当的颜色（facebook：蓝色，google+：红色等）。我玩过它，无济于事。代码如下：

  <li style="float:left;">
      <!-- start social bookmarks -->
      <div style="font-size: 32px; color: grey;">
      <i class="icon-facebook-sign" style="margin-left: 0px;"></i>
      <i class="icon-twitter-sign" style="margin-left: -12px;"></i>
      <i class="icon-linkedin-sign" style="margin-left: -12px;"></i>
      <i class="icon-google-plus-sign" style="margin-left: -12px;"></i>
      </div>
      <!-- end social bookmarks -->
    </li>

【问题讨论】：

你能发布你的 CSS 吗？
相关：stackoverflow.com/questions/13233991/combine-after-with-hover

标签： css font-awesome

【解决方案1】：

你可以使用：

   .icon-facebook-sign:hover{color:lightblue;}
   .icon-twitter-sign:hover{color:yellow}

http://jsbin.com/opeyoy/1/

【讨论】：

【解决方案2】：

你可以试试这样的

.icon-facebook-sign:hover
{
  background-color:blue;
}

【讨论】：

棘手的部分是它应该是颜色与背景颜色，因为它们实际上是文本。

【解决方案3】：

基于您已经有默认颜色的事实，您可以将这三个用于 facebook、google plus 和 twitter：

  .icon-facebook-sign:hover {
    color: rgba(59, 89, 152, .7);
  }

  .icon-twitter-sign:hover {
    color: rgba(0, 172, 237, .7);
  }

  .icon-google-plus-sign:hover {
    color: rgba(172, 0, 0, .7);
  }

【讨论】：