使用悬停更改字体Awesome的图标颜色

时间:2016-08-31 03:09:09

标签: html css colors hover font-awesome

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

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

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

setup.py

这是我所有页脚的CSS:

        <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>

我会很高兴有任何建议,我尝试了迄今为止我知道的所有内容并且无法做到正确。

谢谢!

4 个答案:

答案 0 :(得分:2)

看起来是因为你使用内联样式。它始终具有更高的优先级。您还试图在悬停<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>

我建议为您的字体真棒按钮的<a>标签分配一个类,删除内联样式并将其移动到您的css文件。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您可以使用此功能并检查浏览器 例如:

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

enter image description here

答案 3 :(得分:0)

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

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

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