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

Posted by Michelle Hart
Michelle Hart
7,468 Points

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,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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. :)

Michelle Hart
Michelle Hart
7,468 Points

Yes! That fixed it, thank you!!

John Snow
John Snow
923 Points
John Snow
John Snow
923 Points

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?

John Snow
John Snow
923 Points

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