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.

CSS

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

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

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.