Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Clinton Hopgood
Clinton Hopgood
7,825 Points

Social Media Icons

I'm trying to add social media icons to my current project.

The expected outcome would be that they fill in the color can be defined using CSS and it should also change color when hovered over.

Am I able to use a .svg file for this? Or do I need to use an svg path? I currently have the icons in question in .svg format added to my html using <img> tags. I cannot work out how to change their color, only their size.

Please help, I may actually be completely off tracks...I don't know.

2 Answers

Robert Komaromi
Robert Komaromi
11,927 Points
Robert Komaromi
Robert Komaromi
11,927 Points

You must use an svg path and define the color using the fill property. You can take a look at this codepen (linked to from http://css-tricks.com/using-svg/).

If someone is looking for social media icons, you can find them for free at https://www.iconfinder.com/, usually with the option to get the base64 encoded data URI.

Another option is to use Font Awesome and simply change the color of the icon using the CSS color property.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

Thanks a lot for the response - it was very informative.

I discovered that if I open the svg in a text editor is has the path, very cool to know.