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

CSS

Posted by breemclaughlin
breemclaughlin
6,551 Points

Mail 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
Ali RahimDabagh
2,296 Points
Ali RahimDabagh
Ali RahimDabagh
2,296 Points

Hi, 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
Lucas Krause
19,924 Points
Lucas Krause
Lucas Krause
19,924 Points

Sometimes the solution is really simply. There can be various error:

  1. Does the image img/mail.png really exists?
  2. Does it really is called "mail.png" and not "email.png"?
  3. 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.