Responsive Landing page using HTML, CSS & JS

Solution retrospective
Hello guys, Can you tell me how can I change the svg colors
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Shalom2935
You must have something like this in your html code: <div class="icon"><svg>...</svg></div> Then in your css code you use the selector .icon svg path:hover{fill: #fff}. But you must look carefully where the fill property is locate, most of the time it will be in the path element but it can also be in another element.
Marked as helpful - @Shalom2935
open the svg with a text editor you will see something like <svg width =" " height = " "><path fill ="color"></path></svg> (It will be more than just that) but the only thing you need to modify is the fill property of the path element
Marked as helpful - @franexmo81
Here is an example of SVG changing colours when hovering:
Basically, you need to include the SVG definition inside the html document, instead of linking them from it. Then you select it and modify
fill
with:hover
pseudo-classI hope it helps
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord