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
sarah jeffree
534 Pointscode to add icon is not working
Hi does anybody know why this code is not working?
``.contact-info li.phone a {
background-image: url(../img/phone.png`);
}
.contact-info li.mail a {
background-image: url(../img/mail.png);
}
.contact-info li.facebook a {
background-image: url(../img/facebook.png);
}
3 Answers
Gabriel Roczanski
Courses Plus Student 2,136 PointsAre "../img/" the correct folder? (back one folder then find img)
sarah jeffree
534 PointsMine is not the same as in the video.. Mine is... How to build a website css folder image folder about.html contact.html index.html
I am working on the contact page. Do you know the correct code please or how I change the position of the folders around. I've tried dragging them to the correct position but it just ends up with files going in the wrong folder!
Brenton Kelly
1,058 PointsI'm assuming that your <a> tags are empty and that your image URL's are correct. You'll need to figure out what the dimensions of your icons are and then set your <a> tags to match. Background images don't occupy "space" in a webpage like <img> tags do so your current <a> tags have dimensions width: 0 and height: 0. You'll also need to set your <a> tags to display: inline-block. Here's an example:
.contact-info li.mail a { width: 25px; height: 25px; display: inline-block; background-image: url(../img/mail.png); }
I hope this helps!