如何更改 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;
}

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

How to change hover color for iconfont icons?

html

css

hover

icons