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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Kathryn Moore
Kathryn Moore
1,247 Points
Posted by Kathryn Moore
Kathryn Moore
1,247 Points

Phone icon shows up, but not mail icon: argh!

I can't seem to figure out what's missing. "mail.png" is definitely in the img folder, and Workspaces even completes the path for me.

The mail code looks the same as the phone, but the icon won't show up. Any help would be appreciated, thank you.

/********************** PAGE CONTACT ***********************/

.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('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

<div id="wrapper">
  <section>
    <h3>contact me</h3>
    <ul class="contact-info">
      <li class="phone"><a href="tel:555-8319">phone</a></li>
      <li class="email"><a href="mailto:kathryn@gmail.ca">email</a></li>
    </ul>
  </section>
Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

The css is in a file inside of a css folder? just trying to understand where the image files are relative to the css file. Could you post a link to your workspace?

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I feel fairly certain that this line here:

.contact-info li.mail a { background-image: url('../img/mail.png'); }

should be this:

.contact-info li.email a { background-image: url('../img/mail.png'); }

Looks like you're just missing an "e"! :)

Kathryn Moore
Kathryn Moore
1,247 Points
Kathryn Moore
Kathryn Moore
1,247 Points

GENIUS! Thank you @Jennifer Nordell (and @Ron McCrainie for taking the time to answer).

I should have caught that :/

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You're certainly welcome! But I'm no genius. And we all fall victim to the good ol' fashioned typo every great once in a while. And I'm guessing that's exactly what that one was.