Design comparison
SolutionDesign
Solution retrospective
I have trouble changing SVG file colors with CSS. I'm going to look for more articles from now on, but Is there any free lecture or articles about control SVG files with CSS?
Community feedback
- @EileenpkPosted over 1 year ago
Hi Bundasse!
Your project looks great, and this might be a helpful tip.
To change the color of an SVG, you have to:
- Put the SVG code directly into the HTML, if you put the src of the
<img>
as the SVG file that is in another folder it won't be able to target it - Add a class the the beginning tag of the SVG
- In the CSS the selector should be the class name and then the path
- The property name should be fill for the background of the SVG and stroke for the outline
HTML
<svg aria-labelledby="Facebook" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class=socialIcon > <title id="Facebook" lang="en">Facebook icon</title> <path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" /> </svg>
CSS
.socialIcon:hover path { cursor: pointer; fill: var(--second-color); }
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0@bundassePosted over 1 year ago@Eileenpk Hi Eileen dangelo! Thanks a lot, your comment is really really helpful! I don't have my LinkedIn account yet, but appreciate to your suggestion. Have a nice day!🥰
0 - Put the SVG code directly into the HTML, if you put the src of the
Please log in to post a comment
Log in with GitHubJoin 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