CSS Animating an element while hvoering something else - html

Question

I've found plenty of answers to this question, but none of them have worked for my case. I can't help but feel I'm missing something basic.
HTML
<nav>
<a to="#"><i class="fas fa-home">TEST</i> Home</a>
<a to="#">About</a>
<a to="#">Something else</a>
<div class="animation start-home"></div>
</nav>
CSS
nav {
display: flex;
margin: auto;
/* margin-top: 30px; */
padding: 12px 0;
position: relative;
max-width: 800px;
height: 50px;
background-color: purple;
border-radius: 0;
}
nav a {
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
}
nav i {
/* position: absolute; */
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
color: black;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 150px;
}
a:nth-child(3) {
width: 150px;
}
/* somehow invert this color when the nav a element is hovered */
.fa-home {
color: green;
}
.fa-home:hover {
color: white;
}
/* I expected this to work, but it doesn't */
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
nav a:nth-child(1):hover ~ .animation {
width: 100px;
left: 0;
background-color: green;
}
nav a:nth-child(2):hover ~ .animation {
width: 150px;
left: 100px;
background-color: #d3b814;
}
nav a:nth-child(3):hover ~ .animation {
width: 150px;
left: 250px;
background: rgb(249, 11, 70);
}
What I want is for the green TEST text, left of Home, to change colour when hovering the link.
I've used the ~ modifier to move the background colour around - but I can't get it to work with the I tag (which is a font-awesome icon, but couldn't get codepen to import it properly).
I'm currently able to turn it white while hovering the I tag, but not the link itself.
Finally, here's the original navbar code for those interested.

Answer 1

The selector is wrong
Change
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
To this:
nav a:nth-child(1):hover > .fa-home {
color: white;
}