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
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
18,199 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
18,199 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.