Can't control `<a>` red color for social icons mailto and `"#"` phone:

[kat]

Can’t control <a> red color & white hover for social icons mailto and "#" phone. Instagram works ok. (Pink & Purple borders are so I know where flex areas are.)
Suggestions please.

<!-- Footer --> <footer class="footer" id="footer" footer> <div class="container"> <div class="footer-contact"> <div class="card1"> <a href="#" class="social-icon"><i class="fa-4x fa-inverse fa-phone-volume fas"></i></a> <p>(213) 984-7965</p> </div> <div class="card2"> <a href="mailto:thesmoksbbq@gmail.com" class="social-icon"><i class="fa-4x fa-inverse fa-mail-bulk fas"></i></a> <p>thesmoksbbq@gmail.com</p> </div> <div class="card3"> <a href="https://www.instagram.com/smokes_bbq/" class="social-icon"><i class="fa-4x fa-instagram-square fab"></i></a> <p>@smokes_bbq</p> </div> </div>
`/* FOOTER */
.footer .container {
max-width: 1100px;
margin: auto;
gap: 1rem;
border: pink solid .5rem;
align-items: center;
}

.footer-contact {
display: flex;
flex-wrap: wrap;
color: #ffffff;
font-weight: 800;
width: 100%;
height: 50%;
border: purple solid .5rem;
}

.footer .card1 {
display: flex;
margin: 1rem auto;
padding: 1rem;
background-color: var(–background);
border-radius: .5rem;
align-items: center;
}

.footer .card2 {
display: flex;
margin: 1rem auto;
padding: 1rem;
background-color: var(–background);
border-radius: .5rem;
align-items: center;
}

.footer .card3 {
display: flex;
margin: 1rem auto;
padding: 1rem;
background-color: var(–background);
border-radius: .5rem;
align-items: center;
}

a i {
color: red;
margin-right: 1rem;
cursor: pointer;
}

a i :hover {
color: white;
margin-right: 1rem;
cursor: pointer;
} /* FOOTER media query */
.footer .container {
flex-direction: column;
}`

[RobM]

Hi @kat,
I think the fa-inverse you have applied to the first two is giving problems.
Cheers,
Bob

[kat]

Removing inverse worked for red phone & email. But the white hover doesn’t work. Hover did work on istagram before removing inverse.

a i {
    color: red;
    margin-right: 1rem;
    cursor: pointer;
}

a i :hover {
    color: white;
    margin-right: 1rem;
    cursor: pointer;
}

[RobM]

Hi @kat,
Rhetorical question.

What are you adding a hover class onto?

The space in front of your hover pseudo-class means that you are adding a rule to nothing. I’m honestly not sure how it was working on the instagram icon without looking at the CSS for the rest of the page.

Cheers,
Bob

[kat]

1. Hover problem was that I had a space between i and :
   
   
2. Normalize seems to confuse things. Maybe I should just add a few resets.
   Thoughts?
   Nomalize has a transparent added. If remove I get blue & purple. Guess it is the link blue mixing with brown.
3. .fa-phone-volume::before { content: "\f2a0"; }
   This comes from all.css. No all.css linked to page.
   What is happening here?
   
   

[RobM]

Hi @kat,
Not sure how you are bringing your FontAwesome onto the page, but ‘all.css’ is the FA styling. Check File → Manage Stylesheets.
Here is my mockup from your earlier code looking at the phone icon, but they all work:

And with hover:

I’m on a plain HTML page with Normalize.css.
Cheers,
Bob

[kat]

@RobM

but ‘all.css’ is the FA styling.

I’m using FA from PG. Found it.
Thanks for hanging in there.