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 trialbreemclaughlin
6,551 PointsMail Icon Not Appearing on Contact Page
For some reason, when I put my code in to add icons next to the mail, email, and contact info, I cannot get the mail icon to show up. My phone and twitter ones show up, but I just can't get the mail one to show up.
Here's my code:
.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.twitter a {
background-image: url('../img/twitter.png');
}
2 Answers
Ali RahimDabagh
2,296 PointsHi, maybe it is better to change your code like this:
.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.twitter a { background-image: url('../img/twitter.png'); }
but make sure your selectors are correct or the extension of your icons are all .png . Another thing to check is that you should make sure about the relative path
Lucas Krause
19,924 PointsSometimes the solution is really simply. There can be various error:
- Does the image img/mail.png really exists?
- Does it really is called "mail.png" and not "email.png"?
- Maybe the list item's class isn't "mail" but "email"?
Also, though it is valid to leave it off, you should always include a semi-colon after a declaration.