如何为图标内的文本着色

我想问是否有一种方法可以为我将鼠标悬停在下面链接的图标上添加颜色？

例如，如果我将鼠标悬停在文本上，如何才能仅将文本的颜色设置为“红色”？我认为你必须结合照片编辑器来完成它，但我真的不知道如何做。感谢帮助

这是我尝试过的代码。

<section id="icons">
   <a href="#"><img src="youtube.png" class="youtube" alt=""></a>
</section>


.youtube {
 background-image: url(youtube.png);
 width: 5vw;
 position: absolute;
 }

.youtube:hover {
 background-image: url(youtubehover.png);
 width: 5vw;
 position: absolute;
 }

最好的方法是创建两个单独的图像。一种是当图标处于默认状态时，另一种是当图标处于悬停状态时。在悬停状态下，将颜色更改为您喜欢的颜色（在本例中为红色），以便当用户将鼠标放在其上时，他们会看到该颜色。

下面是一些 CSS 的示例：

#icon {
background-image: url(../images/example_default.png)
width: 150px;
height: 150px;
position: absolute;
}

#icon: hover {
background-image: url(../images/example_hover.png)
width: 150px;
height: 150px;
position: absolute;
cursor: pointer;
}

:hover更改当用户将鼠标悬停在图标上时图像的外观。请注意，背景图像是不同的，图标可能处于的每种状态都有一个。我还添加了cursor: pointer假设这个图标是某种按钮。