通过悬停更改 Font Awesome 的图标颜色

Question

我刚开始编程，需要一些帮助。

我正在使用 Font Awesome 图标，我试图在鼠标悬停时更改它的颜色，但不知道为什么它不起作用。我在这里查找其他遇到同样问题的人，尝试了他们的解决方案，但仍然无法正常工作:(

这是我的 HTML 代码的一部分：

        <footer>
        <div class="row container">
            <div class="logo-rodape col-md-2">
                <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
            </div>

            <div class="r-content col-md-4">
                <p class="slogan-title">CLEAN AND PROTECTION</p>
                <p class="slogan-sub">Proteção e limpeza para sua família</p>
            </div>

            <div class="r-social col-md-5">
                <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a>

                <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a>
            </div>
        </div>

    </footer>

这是我所有的页脚 CSS:

footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}

footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}

.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block; 
}

.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}


.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw); 
@include screen-above(800px) {
    font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff; 
}

.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw); 
@include screen-above(800px) {
    font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}

.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}

.fa-facebook {
padding-right: 20px;
}

.fa-facebook:hover {
color: #57cdf7;
}

如果有任何建议，我将非常高兴，我已经尝试了目前所知道的一切，但无法正确完成。

谢谢！

Answer 1

因为它在锚标记中，所以您应该在悬停锚标记时写 CSS。 a:hover .fa-facebook { color: #57cdf7}

Answer 2

您可以使用它并检查您的浏览器例如：

i.fa.fa-facebook.fa-2x:hover {
color: red;
background-color: red;
}

Answer 3

看起来是因为你使用了内联样式。它总是具有更高的优先级。您还试图在 <i> 标签悬停时更改样式，但您应该使用 <a>

看一看：

a {
  display: block;
}

.test1 {
  color: red;
}

.test1:hover {
  color: #57cdf7;
}

.test2 .fa-facebook:hover {
  color: #57cdf7;
}

.test3 .fa-facebook:hover {
  color: #57cdf7;
}

<a href="#" class="test1">
  <i class="fa fa-vimeo fa-2x">facebook</i>
</a>
<a href="#" class="test2">
  <i class="fa fa-facebook fa-2x">facebook</i>
</a>
<a href="#" class="test3">
  <i class="fa fa-facebook fa-2x" style="color:green">facebook</i>
</a>

我建议为你的 font awesome 按钮的 <a> 标签分配一个 class，删除内联样式并将其移动到你的 css 文件。

Answer 4

/* hover state */
 a:hover .far,  a:hover .fas {
    color:white;
 }

/* normal state */
li a  .far , li a .fas  {
  color:red;   
}

它对我有用....谢谢你。

通过悬停更改 Font Awesome 的图标颜色

Change Font Awesome's icon color with hover

html

css

colors

hover

font-awesome