html - 如何更改 iconfont 图标的悬停颜色？

Question

刚开始学习网络开发。我了解如何使用 .classname a:hover{} 更改常规链接的悬停颜色，但我尝试过的每个变体都没有奏效。我认为我的图标有一些怪癖，因为我从 flat-icon.com 将它们作为 iconfont 下载，它们的说明(在此处给出:http://www.flaticon.com/iconfont-demo/)使您看起来好像需要操纵 flaticon.css 文件来更改任何特征，例如图标颜色。

无论如何，这是我代码的相关部分:

<div class="jumbotron">
  <div class="container" >
    <h4>Family Owned and Operated Since 1978</h4>
    <table>
      <tr class="big-flat-icons">
        <td><a href="services.html"><i class="flaticon-pipe9"></i></a></td>
        <td><a href="testimonials.html"><i class="flaticon-diploma20"></i></a></td>
        <td><a href="about-us.html"><i class="flaticon-man204"></i></a></td>
        <td><a href="contact-us.html"><i class="flaticon-old26"></i></a></td>    
      </tr>
    </table>
  </div>
</div>

我试着把它放在我的 main.css 文件中，但没有效果:

.jumbotron .container a:hover{
    text-decoration: none;
    color: #FF00FF;
}

最初将图标放在我的页面上时，我不得不操纵字体附带的 flaticon.css 文件中的代码来更改图标的大小和颜色，所以我觉得我必须在这里做一些事情使悬停颜色起作用，但我还没有弄清楚:

@font-face {
    font-family: "Flaticon";
    src: url("flaticon.eot");
    src: url("flaticon.eot#iefix") format("embedded-opentype"),
    url("flaticon.woff") format("woff"),
    url("flaticon.ttf") format("truetype"),
    url("flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
        font-size: 100px;
font-style: normal;
margin-left: 20px;
color: white;
}


.flaticon-antique:before {
    content: "\e000";
}
.flaticon-construction3:before {
    content: "\e001";
}

很抱歉这个问题很长。有人有什么想法吗？

如果有帮助，这是我正在处理的站点所在的位置:http://reagankm.github.io/

Answer 1

我认为图标字体没有正确接收悬停样式，但你可以试试这个:

.jumbotron .container a:hover i:before {
    text-decoration: none;
    color: #FF00FF;
}