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

Posted by Andrew Tupper
Andrew Tupper
1,419 Points

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="")

Joseph Damiani
Joseph Damiani
1,066 Points

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

8 Answers

Joseph Damiani
Joseph Damiani
1,066 Points

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

Andrew Tupper
Andrew Tupper
1,419 Points
Andrew Tupper
Andrew Tupper
1,419 Points

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.

Marc Sanchez
Marc Sanchez
20,039 Points
Marc Sanchez
Marc Sanchez
20,039 Points

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

Andrew Tupper
Andrew Tupper
1,419 Points
Andrew Tupper
Andrew Tupper
1,419 Points

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

Andrew Tupper
Andrew Tupper
1,419 Points
Andrew Tupper
Andrew Tupper
1,419 Points

Joseph,

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

Victor Purol
Victor Purol
7,776 Points
Victor Purol
Victor Purol
7,776 Points

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."

Victor Purol
Victor Purol
7,776 Points
Victor Purol
Victor Purol
7,776 Points

Thanks Andrew!

Sara McEnhill
Sara McEnhill
6,591 Points
Sara McEnhill
Sara McEnhill
6,591 Points

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.