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.

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

Pepe Suarez
Pepe Suarez
18,267 Points
Posted by Pepe Suarez
Pepe Suarez
18,267 Points

How can i fix icons that doesn't show on browser?

Im trying to get the small icons of twitter, mail, and phone into my background in my website but for some reason they don't show on the browser, i've already checked that these files are in the correct folder, and triple checked my css code but they just dont show up these is how i wrote it.

.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');

}

I've also cheched that the class .contact-info in the html file is written well and it is exactly in the ul as the video shows, so im pretty confused, i also tried different browsers and my result is the same. thanks for the help!

Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

This is my html page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pepe Suarez | Portfolio</title>
    <link rel= "stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Rancho|Oswald:300' rel='stylesheet' type='text/css'>
    <link rel= "stylesheet" href="css/main.css">


  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Pepe Suárez</h1>
        <h2>Portfolio</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>
          <h3>general information</h3>
          <p>Im currently available for web desing</p>
          <p> Please use one of the social networks to contact me</p>
        </section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li clas="Phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="Mail"><a href="mailto:pepesrzra@gmail.com">pepesrzra@gmail.com</a></li>
          <li class="Twitter"><a href="http://twitter.com/pepe_srz">@pepe_srz</a></li>

        </ul>
        <section>
        </section>
        <footer>


          <a href="http://facebook.com/pepe.srz"><img src="img/facebook-wrap.png" alt="facebook logo" class="social icon" ></a>


          <a href="http://twitter.com/@pepe_srz"><img src="img/twitter-wrap.png" alt="twitter logo" class="social icon"></a>


          <p>&copy;2014 Pepe Suarez.</p>
        </footer>
    </div>
  </body>
</html>```

this is how i wrote it on css

```css
.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;



}

.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');


}

1 Answer

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Hi Jose, I saw what you've done wrong there. At the heading level 3 Contact Details, first you write the class with missing one s at the first <li> and second your class name shouldn't be capitalized. It should be "phone", "mail", and "twitter".

It should be like this:

<h3>Contact Details</h3>
<ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:pepesrzra@gmail.com">pepesrzra@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/pepe_srz">@pepe_srz</a></li>
</ul>
Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

Thanks a lot!!! lol now it works perfectly!