(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

, 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.