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 How to Make a Website Adding Pages to a Website Add Iconography

Iconography only displays two of the three images.

The bacground icons for the contact page are not functioning for me. My page will show the twitter and the phone images, ,but not the mail. I have deleted and uploaded the image again to my files but it still doesn't work.

contact page file>>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Michelle Hart | Opportunist</title>
    <link rel="stylesheet" href="css/normalize.css"> 
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700%7CVollkorn' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/theflair.css">  
    <link rel="stylesheet" href="css/responsive.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
     <header>
        <a href="index.html" id="logo">
          <h1>Michelle Hart</h1>
          <h2>Opportunist</h2>
        </a>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
          </ul>
        </nav>
     </header>
    <div id="wrapper">
       <section id="primary">
        <h3>General Information</h3>
         <p>You can contact me at ....</p>
         <p>Please use email </p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
          <ul class="contact-info">
            <li class="email"><a href="mailto:thebomb@gmail.com">thebomb@gmail.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=generic">@generic</a></li>
            <li class="phone"><a href="tel:502-555-5555">502-555-5555</a></li>
          </ul>       
    </section>
       <footer>
          <a href="http://twitter.com/generic"><img src="IMG/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
          <a href="http://facebook.com/kyra9382"><img src="IMG/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy; 2015 Michelle Hart.</p>
       </footer>
     </div>
  </body>  
</html>

css file >>>

/*****************
 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.mail a {
  background-image:url('../IMG/envelope.png');
}


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

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

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,065 Points

Hi there Michelle.

I fixed up your forum code for your to make the code clearer. Checkout the markdown cheatsheet for adding code to the forums, that'll help you posting code to the forums if you're not using Workspaces snapshots. :-)

I think I found your problem.

In your CSS you're trying to find an list item element with the class of mail but the class you want is email. :-)

 .contact-info li.email a {
  background-image:url('../IMG/envelope.png');

Hope this helps. :)

Yes! That fixed it, thank you!!

Hi guys, I'm having the same problem, but I'm missing the Twitter image. Mail and phone images are both displayed, just the twtitter image isn't. Help please?

I fixed my own problem lol Just by adding a capital T for Twitter. Reloaded the page and that worked.