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 Adding Pages to a Website Add Iconography

Kimberly Skipper
Kimberly Skipper
2,176 Points
Posted by Kimberly Skipper
Kimberly Skipper
2,176 Points

Icons are not showing to the left of the information on the contact page (phone, mail,twitter).

I am stuck. I tried to review my code and correct it but I can't find the problem. The icons are still showing up in my text instead of to the left of the information. Thank you for your help.

/****************** PAGE: CONTACT ******************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.phone a { background-image: url('../img/mail.png'); }

.contact-info li.phone a { background-image: url('../img/twitter.png'); }

2 Answers

Riho Rannamäe
Riho Rannamäe
3,784 Points
Riho Rannamäe
Riho Rannamäe
3,784 Points

You are missing a semicolon after the property "padding" in the ".contact-info a" selector.

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px; /* Here was the missing semicolon */
  margin: 0 0 10px;
}

I hope this will fix your problem! :)

Kimberly Skipper
Kimberly Skipper
2,176 Points
Kimberly Skipper
Kimberly Skipper
2,176 Points

Thank you this fixed the problem :)

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Hi Kimberly,

The CSS looks correct from what I'm seeing. I would double check the html and verify everything is correct. Just refresh your browser a few times if not do command-shift + R. That should reset your cache.

The only thing I would add is a 0 at the end of margin as some browsers need the four properties in order to work.

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding 0 0 0 30px; margin: 0 0 10px 0; }

Let me know if that fixes it.

Best, Victor

Kimberly Skipper
Kimberly Skipper
2,176 Points
Kimberly Skipper
Kimberly Skipper
2,176 Points

Thank you Victor for your response. :)