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 How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Why do my social media links disappear when I use "social-icon" as in the video but works for "social" without the -icon

When following along with the video using class="social-icon" makes my social media links disappear, but without the -icon or named something else works perfectly?

Works: <a href="http://twitter.com/atupper15"><img src="twitter-wrap.png" alt="twitter logo" class="social"> </a>

Doesn't work: <a href="http://twitter.com/atupper15"><img src="twitter-wrap.png" alt="twitter logo" class="social-links"> </a>

(Note: While testing this I have been making sure my css file reflects whatever name used above in the class="")

Can you paste your code? Which video and challenge does this correspond with?

8 Answers

Check out my code in my folders at https://w.trhou.se/i5g9v90trh

Hi Victor,

I couldn't get the "social-icon" to work no matter what I tried and what was suggested. Syntactically it is correct either way. You can actually name the file whatever you want and it won't interfere with any of the later lessons as long as you just remember to use whatever file name you chose.

Can you post a snipet of your markup and css? You can use codepen to share it and post it in here so that we can better help you solve your problem. Thanks

Hi Marc and Joseph,

Here is a snapshot link to my code. The index file is my working file for the HTML and the CSS file is in the folder CSS/main.css https://w.trhou.se/oe22hse7is

-The specific section I am having problems with is the Footer.

Thanks for your help, Andrew

Joseph,

Thank you for your response. I tried social_icon and it didn't seem to work.

Hi there. I am having the same issue, as soon as I add 'class="social-icon"' my social media icons disappear. Here is my code right up to that point: http://codepen.io/victorpurol/pen/aOBqYL

As Andrew said, it works fine when the name is just "social" but not as "social-icon."

Thanks Andrew!

I had this same problem, where using class="social-icon" was causing the images to disappear. Other class names work fine.

I tried contacting Tech Support about it, but they sent me here to the discussion forum to report it. So, here's my bug report. Further troubleshooting seems to point to it being a conflict with Safari. I tried rendering the page in Firefox using "social-icon" and it worked fine.