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

Icons are not showing to the left of the information on the contact page (phone, mail,twitter).

this is my code:

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info { 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') }

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

Savannah Lynn
Savannah Lynn
13,662 Points

Can you post your full code and a screenshot of where your icons are appearing on your preview page?

3 Answers

I think we need to see the whole code to be able to troubleshoot better.

Cheers.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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>Informação Geral</h3> <p>Não estou à procura de um novo trabalhao em design, mas estou disponivel para discutir ideias sobre o tema</p> <p>Por favor, utilize apenas um numero de contacto para comunicar se for urgente, caso contrário utilize o email ou o facebook</p> </section> <h3>Detalhes de contactos</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:964557777">964557777</a></li> <li class="mail"><a href="mailto:lpintarola@hotmail.com">lpintarola@hotmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=lpintarola">@lpintarola</a></li> <section>

    </section>
    <footer>
      <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
      <p>&copy; 2014 Nick Pettit.</p>
    </footer>
</div>

</body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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>Informação Geral</h3> <p>Não estou à procura de um novo trabalhao em design, mas estou disponivel para discutir ideias sobre o tema</p> <p>Por favor, utilize apenas um numero de contacto para comunicar se for urgente, caso contrário utilize o email ou o facebook</p> </section> <h3>Detalhes de contactos</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:964557777">964557777</a></li> <li class="mail"><a href="mailto:lpintarola@hotmail.com">lpintarola@hotmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=lpintarola">@lpintarola</a></li> <section>

    </section>
    <footer>
      <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
      <p>&copy; 2014 Nick Pettit.</p>
    </footer>
</div>

</body> </html>

I do not understand why when I copy the code here it all comes together