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;
}
CSS Animating an element while hvoering something else
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;
}