How do I change the color of font awesome icon on hover?

Question

I am trying to make a website and I'm on the footer. I want to make a follow us feature at the bottom of the page, and I want the logos to turn green when I hover over them. But for some reason, when I do so, it doesn't do anything. Here is the extracted code:

    <div class="footer">
            <footer>
                <h2>Follow Us</h2>
                <a href="https://facebook.com"><img src="img/facebook.svg" alt="facebook" class="facebook"></a>
            </footer>
        </div>

.facebook{
    width: 2%;
}

.facebook:hover{
    color: var(--aa-color);
}

You do not seem to be using fontawesome here, just an image. — Paulie_D, Sep 19 '20 at 08:45
There are many ways to fill of and svg in img tag. Check out this answer https://stackoverflow.com/a/43916743/7502914 — Timmy Chan, Sep 19 '20 at 08:46

Rayees AC · Answer 1 · 2020-09-19T09:10:21.377

Can you something like this :)

Simply add :hover and :focus(mobile version) in css to change color of icon.

.fa.fa-facebook:hover,.fa.fa-facebook:focus{
   color: var(--aa-color);
}

body{
   --aa-color: green;
} 
.fa.fa-facebook{
  font-size:48px;
}

.fa.fa-facebook:hover,.fa.fa-facebook:focus{
   color: var(--aa-color);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
  <footer>
    <h2>Follow Us</h2>
    <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
  </footer>
</div>

if you add svg image to change color by using fill property

.facebook:hover,.facebook:focus{
  fill: var(--aa-color);
}

body{
   --aa-color: green;
} 
.facebook{
  width:15%;
}

.facebook:hover,.facebook:focus{
  fill: var(--aa-color);
}

<div class="footer">
    <footer>
        <h2>Follow Us</h2>
        <a href="https://facebook.com">
          <svg version="1.1" class="facebook" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310 310" style="enable-background: new 0 0 310 310;" xml:space="preserve">
            <g id="XMLID_834_">
                <path
                    id="XMLID_835_"
                    d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064   c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996   V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545   C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703   c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"
                />
            </g>
        </svg>
        </a>
    </footer>
</div>

Can you assign any color to `--aa-color` variable? I updated answer. — Rayees AC, Sep 19 '20 at 09:13

score 0 · Accepted Answer · answered Oct 01 '20 at 15:22

0

so, I figured out the answer. If I download the icon, it turns into an SVG image, and there's no way to change the color. I have to connect the font awesome kit to my code in order to use the icons properly. Thanks for all your help though.

answered Oct 01 '20 at 15:22

Sianna Zewdie

89
17

How do I change the color of font awesome icon on hover?

2 Answers2