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

HTML How to Make a Website CSS: Cascading Style Sheets What is CSS?

Posted by Mark Ellis
Mark Ellis
Courses Plus Student 2,853 Points

Changing Facebook and Twitter logos using css

After I have coded the footer to cascade from green to orange, how would I change the Facebook and Twitter logos to their correct copyrighted logos? You can see what I mean at 8:06 in the video, where both logos appear to have an orange film over them.

1 Answer

Mark Truitt
Mark Truitt
17,230 Points

Hi Mark,

These are both semi transparent PNGs. I wouldn't bother using CSS and would modify the image directly since thats all they are.

Personally, I've grown fond of using Font Awesome for Social media and other icons. https://fortawesome.github.io/Font-Awesome/

These can be scaled and modified all you want via CSS and they are extremely easy to add to any product via the CDN.

Mark Ellis
Mark Ellis
Courses Plus Student 2,853 Points

Mark Truitt ,

Thanks for the quick response. Font Awesome looks to be an interesting solution. However, I think I need a little more time behind the keyboard before adding it in. I'll try to find some tutorials on using Font-Awesome and play around with it. If you have some recommendations for learning it, please pass them along.

Mark Truitt
Mark Truitt
17,230 Points

Believe it or not. Its as simple as copy/paste.

https://fortawesome.github.io/Font-Awesome/get-started/

This is really all the information you will need. If you use the CDN version its as simple as they explain.

Then find an icon you like and copy/paste it. Below is all it takes to make the gitlab icon show up after pasting the CDN link in the head of your site. You can then use normal CSS to adjust it in size, color, etc. Once you get that down there are some other things you can do with it like replacing the bullets on ULs and OLs etc using before/after pseudos. 

<i class="fa fa-gitlab" aria-hidden="true"></i>