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

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!