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.
James Biddle
3,853 PointsProblem 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
Heather Appleberry
1,064 PointsYou 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
Justin Iezzi
Courses Plus Student 18,014 PointsHi 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
James Biddle
3,853 PointsThanks!
James Biddle
3,853 PointsIt 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
24,934 PointsBe 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')
James Biddle
3,853 PointsI checked, video its img, my workspace is image.. workspace link....
James Biddle
3,853 PointsCompared my code with his etc, going nuts! :)
James Biddle
3,853 PointsYup@@!@@@ Was just going to post that I found it:
Jesus!!!!! :):)
Thanks for the response!
LITTLEST DETAIL!
James Biddle
3,853 PointsThanks everyone...
Loving this community so far!
Justin Iezzi
Courses Plus Student 18,014 PointsSure 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.