Icon hover color for links

Hi there! I have a page set up with a text box inside of a column, and have placed two social media icons in there with links to each respective social account. I’m trying to program out a hover color for icons – but only ones that have links included with them (since there are other icons on this page that don’t link to anything, I don’t need/want hover colors applied to those).

I tried the following code:

/* icon hover color */
.av-icon-char:hover {
color: red!important;
}

But that applied to all the icons on the page, not only the linked icons.

Note that I do have some complex rules for underlines on the site – in order to meet ADA compliance, all my text links are forced underlines while I’ve removed underlines from icons, buttons, etc.

Thanks in advance!