(CSS) Can't add a hover effect that's synchronized with an i tag

Incase the title was poorly worded I have an "a" tag with an "i" tag inside of it so that when you :hover over either tag it should display as the same color. so far if I hover over the "i" tag it changes the color of the whole hyperlink, but if I hover over the "a" tag, the "i" tag remains the original color. I don't mean to be a bother but I couldn't find any suitable answers online. I would appreciate any help but no worries either way. :) The code as it stands The HTML ```<h2><img class="profile-image" src="images/image.png" alt="image"> <a href="#">Username: "Example article name." <i class="fas fa-cube"></i></a></h2>``` The CSS ```a, i{ text-decoration: none; color:var(--hyperlink-color); } .blogs a:hover, .blogs i:hover { color:var(--hover-hyperlink); }``` I don't know if it matters but the "i" tag changing the color of the whole link started because I move the "i" tag, which used to be directly outside of the "a" tag.