Equalizer landing page using HTML,CSS and grid
Design comparison
Solution retrospective
Please let me know:-
- how to change the svg icons color on hovering them ...i couldn't figure out how to write the corresponding HTML and then CSS . 2.how to get the position of main background correct specially for my desktop version.
Community feedback
- @hmadamkPosted about 2 years ago
you can't if you're using img tags, there is to possible solutions copy the svg and but it in place where the image is which is kind of messy but works then all you have to do is
svg:hover{ fill:{your color goes here} }
make sure to use fill instead of color or it won't work or you can add the svg's to the bottom of your page and use where you want i don't know how but here a link how to link to svg's it's a series about svg you might wanna check out the last solution is to use an icon library like font-awesome and you get the icon like a text and you have all the control you need I prefere this one it would look like this<i class="fa-facebook"></i>
you can select it either by adding a class or be refereing to the i elment and you would use the color property like thati{ color:{your color goes here} }
notice that this approch is flexable and it's like styling a text you can add a background or a text shadow or whatever you like here's a link to font-awesomeMarked as helpful0
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