Add the following code

.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-size-sm .vc_icon_element-icon:hover, html .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner:hover > span {
    color: #07918A !important;
}

Problem: you hovered the < a > and gave it a hover class but the icon < span > was not affected by it. My code should fix this.

Hi there I have a rather strange problem going on here with one social media link in the footer section of a website. I have applied a simple :hover rule with a specified colour slap, when the element is being hovered. Well so far so good, but the link doesn’t change its colour when being hovered. I even put !important rule (which I very well know that isn’t a good practise at all) and still no improvement. When opened in DevTools and applied the hover checkbox somehow the rule applies and the icon gets changed. My question is why is this happening, and is this problem coming from the nested tags, because I clearly see that the new CSS rule is there and should be working? The theme is quite outdated and old-fashioned, and is working on WordPress.