Social Media Icons
I'm trying to change the color of the icon to white, I did everything I could, but couldn't find any solution.
HTML: <div class="social">
<div class="facebook">
<a href="#">
<img src="facebook-f.svg">
</div>
<div class="twitter"> <a href="#"> <img src="twitter.svg">
</div>
<div class="instagram"> <a href="#"> <img src="instagram.svg"> </div> </div> CSS: .social{ display:flex; justify-content: flex-end; transform: translate(-100px, 30px); gap:1rem; height:20px; color:white; } .social img { width: 20px; height: 20px; }
<div class="twitter"> <a href="#"> <img src="twitter.svg">
</div>
<div class="instagram"> <a href="#"> <img src="instagram.svg"> </div> </div> CSS: .social{ display:flex; justify-content: flex-end; transform: translate(-100px, 30px); gap:1rem; height:20px; color:white; } .social img { width: 20px; height: 20px; }
2 Replies
Because you're linking to the images as external assets, it's effectively a normal image.
They're SVGs, so you could open them up and change the
fill attribute on them to be white, or you could use them as inline elements, and then style them with fill: white in your css