Julia Aguiar Julia Aguiar - 3 months ago 20
CSS Question

Change Font Awesome's icon color with hover

I just started programming and i need some help.

I'm using Font Awesome icons and i'm trying to change it's color when hovered but don't know why it isn't working. I looked up for other people having the same problem here, tried their solutions but it's still not working :(

here's part of my HTML code:

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


And here's all my footer's 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;
}


I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.

Thanks!

Answer

You can use this and check on your browser for example :

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

enter image description here

Comments