Design comparison
Solution retrospective
Hi, community!
I have many questions but particularly about rendering SVG files. For this challenge, I wrapped each SVG icon with a div. Then, I added:
background-colour -> div filter: brightness(0) invert(1); -> SVG icons.
I did some research and there seem to be a couple of approaches to adding the same hovering effect, but I was too sure what would be better, if not the best. So, if you know a better or easier approach to working with SVG icons, I'm happy to hear!
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello there! 👋
Regarding your question, I recommend using inline SVG instead. This way, you can change the color of the icon by changing the
fillcolor. So, in CSS it would be.a:hover svg path { fill: <color>; }Also, use an anchor tag to wrap the social media icon. It has interactivity and also it should be a social media link for the company.
The alternative text of the logo should be the company name. Also, alternative text should not contain any words that are related to the word "image". I recommend doing some research on how to write good alternative text. 😉
That's it! I hope you find this useful! Happy coding! 😁
Marked as helpful1@TSune-webPosted over 2 years agoHi, @vanzasetia!👋
Thank you for your advice and recommendation! These are very helpful😄 I'll try to use inline SVG and pay more attention to alternative texts as well!
Happy coding!😊
0
Please log in to post a comment
Log in with GitHub
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