Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Problem with icons

Having issues with the contact-info icons; the phone shows up but twitter and email icons dont. Pulling my hair out. Copied the path from phone and verified the file structure and file names....

http://port-80-nul1cpz9cr.treehouse-app.com/contact.html

MAIN.CSS --------

.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('../image/phone.png');

}

}

.contact-info li.mail a {

background-image: url('../image/mail.png');

}

}

.contact-info li.twitter a {

background-image: url('../image/twitter.png');

}

contact.html---------------------

     <section>

       <h3>Contact Details</h3>
       <ul class="contact-info">
        <li class="phone"><a href="tel:480-555-1212">480-555-1212</a></li>
        <li class="mail"><a href="mailto:jpbiddle@hotmail.com">jpbiddle@hotmail.com</a></li>
        <li class="twitter"><a href="https://twitter.com/xffxe4">Twitter</a></li>
       </ul>


     </section>

Thanks for any help!

Jim

7 Answers

You have two } at the end of .contact-info li.phone a { and .contact-info li.mail a {.

.contact-info li.phone a {

background-image: url('../image/phone.png');

}

} <--<--This is extra

.contact-info li.mail a {

background-image: url('../image/mail.png');

}

} <--<--This is extra

Hi James,

You have extra closing curly braces in your css. This is breaking the following background images, keeping them from appearing on your page.

.contact-info li.phone a {

  background-image: url('../image/phone.png');

}

} /* <---- Extra curly brace */

.contact-info li.mail a {

  background-image: url('../image/mail.png');

}

} /* <---- Extra curly brace */

.contact-info li.twitter a {

  background-image: url('../image/twitter.png');

}

Remove these and it should fix your problem.

edit: Heather beat me to it

Thanks!

It was funny; right when I noticed it, fixed it and refreshed - I smiled. Right then two emails came through, we are all in sync!

Tony Nguyen
Tony Nguyen
24,934 Points

Be sure that you have selected the correct folder. Look at your workspace again and look at what is your folder called that is containing your images. As in your case, it may be "img" instead of "images".

So instead of:

background-image: url('../image/phone.png')

It would actually be:

background-image: url('../img/phone.png')

I checked, video its img, my workspace is image.. workspace link....

https://w.trhou.se/v08gfu8pvg

Compared my code with his etc, going nuts! :)

Yup@@!@@@ Was just going to post that I found it:

Jesus!!!!! :):)

Thanks for the response!

LITTLEST DETAIL!

Thanks everyone...

Loving this community so far!

Sure thing! Be sure to select a best answer when your problem is solved, so others know that you no longer need help. In this case, Heather beat me by a minute or two, so I think she got this one.