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

**URL:** <https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425>\
**Category:** Beginners\
**Created:** [March 26, 2022, 2:43pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425 "2022-03-26T14:43:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [March 26, 2022, 2:43pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/1 "2022-03-26T14:43:15Z")

</div>

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.  
 ![Screen Shot 2022-03-26 at 7.29.33 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f2ae17547a94cd942c4ad7b7f164a0c8444e2a01.png)  
 ![Screen Shot 2022-03-26 at 7.29.47 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/41a43bc3ee52f00b0cf64a324e6317834a3d024f.png)

` <!-- 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;  
}`

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 26, 2022, 6:03pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/2 "2022-03-26T18:03:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [March 26, 2022, 7:48pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/3 "2022-03-26T19:48:10Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 26, 2022, 7:52pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/4 "2022-03-26T19:52:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [March 26, 2022, 8:12pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/5 "2022-03-26T20:12:44Z")

</div>

1. Hover problem was that I had a space between i and :  
 ![Screen Shot 2022-03-26 at 1.11.51 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f7c1f28f392490fe0b11df31be98ad2685f23b90.png)
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?  
 ![Screen Shot 2022-03-26 at 12.42.21 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/845b24b7773f69b74363f01191e48151c86f51a4.png)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 26, 2022, 8:21pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/6 "2022-03-26T20:21:44Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9fb2738693a3801784fda23e491ee385d33e7163.jpeg)  
And with hover:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/520fe8000683bef69ccd7d2dbc22e8f17af7e476.jpeg)  
I’m on a plain HTML page with Normalize.css.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [March 26, 2022, 8:49pm UTC](https://forum.pinegrow.com/t/cant-control-a-red-color-for-social-icons-mailto-and-phone/6425/7 "2022-03-26T20:49:29Z")

</div>

> [@RobM](#):
>
> but ‘all.css’ is the FA styling.

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