如何在图标内部添加文本颜色 [英] How to color text inside of icon

问题描述

我想问一下，如果我将鼠标悬停在下面，我是否可以为下面链接的图标添加颜色？

I wanted to ask if there is a way I can add color to the icon I linked down below if I hover over it?

https://www.google.ch/search?q=linkedin&source = lnms& tbm = isch& sa = X& ved = 0ahUKEwilrciPwpPVAhUEWhQKHYX7CxcQ_AUICigB& biw = 1920& bih = 949＃tbm = isch& q = linkedin + black + icon& imgrc = eCztS3qV_QYT9M

例如，如果我将鼠标悬停在文本上，如何只将文本颜色设为in红色？我认为你必须与照片编辑器结合使用，但我真的不知道如何。感谢您的帮助

For example how can I make the color only of the text "in" red if I hover over it? I think you have to do it in combination with a photo editor but I dont really know how. Thanks for help

这是我尝试的代码。

<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;
 }

推荐答案

我不得不制作文字里面的图标空白使用魔术棒与paint.net。我也删除了边缘的白色。使用以下代码，当我将鼠标悬停在其上时，我将图标中的颜色或图标内容从白色更改为红色

I had to make the text inside the icon blank using magic wand with paint.net. I Also deleted the white color of the edges. With the following code I changed the color from the text or the content inside the icon from white to red when I hover over it

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


#icons img {
   width: 5vw;
   padding: 0;
}

#icons img:hover {
   background-color: red;
   border-radius: 100%;
   overflow: hidden;
}

这篇关于如何在图标内部添加文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！