Question

刚开始学习网页开发。我了解如何使用.classname a:hover{}更改常规链接的悬停颜色，但我尝试过的每种变体都没有效果。我认为我的图标有一些怪癖，因为我将它们作为iconfont从flat-icon.com下载并且他们的说明（这里给出：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文件中的代码，该文件随字体一起更改图标＆＃39;最初将它们放在我的页面上时的大小和颜色所以我觉得我必须在这里做一些事情才能让悬停颜色正常工作但是我还没想到它：

@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图标的悬停颜色？

1 个答案: