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

Holly Ramage
Holly Ramage
312 Points

I have followed the instructions, why are my social icons not smaller?

I have checked that I have written correctly in CSS and HTML. Is it possibly to do with the image source? I have also had problems with the Photoshop images provided not appearing at all on the screen.

3 Answers

You need to attach the class to a specific element. In your case, that would be the image tags where you're placing those icons. So something like

<img class="social-icon" src="url-to-your-image.jpg" />

Then your CSS rule

.social-icon { width:20px; height: 20px; margin: 0 5px }

Will reference any element in your HTML that has a class equal to "social-icon".

Hope that answers your question.

Holly Ramage
Holly Ramage
312 Points

Ok thanks for your help!

Post your code and explain what you are doing and what is the result you are trying to achieve please.

Holly Ramage
Holly Ramage
312 Points

In HTML I added the class:"social-icon" :

<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class:"social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class:"social-icon"></a>

I added the below in CSS in the footer section:

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

both in order to make the facebook and twitter icons smaller in the footer section of the web page.

Thanks!

I had the same problem. I realised that I should have written in HTML:

class="social-icon" and not class:"social-icon"

Hope you sorted it out.