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

Social Media Hover Icons

Hey guys

I'm trying to find a good tutorial on creating social media icons that change color when a user hover over them much like the ones found on Brent Galloway's site (http://brentgalloway.me/) I am have been trying to find a good tutorial for weeks and I just can't find one.

Thanks :)

Stu

2 Answers

Javier Correa
Javier Correa
4,781 Points

hi, its easy, check out my site with hover social icons :) http://7diez.com

Awesome thanks for that Francisco, that was exactly what I was looking for :)

Stu

For social icons i use http://icomoon.io/ you can create a vector font of all the icons that you wish to use. you can then use CSS to style all icons. you can treat them just like any text, therefore you can make them any size or colour. you can also add a background and border-radius to make them oval, round or square.

you can also use CSS to and a :hover state and change any of the attributes you want.

Hope this helps Brett