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 Paul Cleenewerck
Paul Cleenewerck
684 Points

Can't display the mails, phone and twitter icons:

Hi guys,

Although everything had gone so smoothly up to now, I now can't display the little icons for Phone, Mail, Twitter on the contact page.

Here is the CSS code I did related to it:

.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.phone a { background-image: url('../img 2/phone.png'); }

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

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

Here is the HTML I did related to this CSS:

<section>

  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class"phone"><a href="tel: +352 621 232 309">+352 621 232 309</a></li>
    <li class"mail"><a href="mailto:p.cleene@gmail.com">p.cleene@gmail.com</a></li>
    <li class"twitter"><a href="http://twitter.com/intent/tweet?

screen_name=paulcleenewerck">@paulcleenewerck</a></li> </ul> </section>

Does someone see anything wrong with this code or has any idea why it might not work?

Many thanks :)

3 Answers

Cassio Victor Cadore
Cassio Victor Cadore
6,579 Points
Cassio Victor Cadore
Cassio Victor Cadore
6,579 Points

Ohhh my god! I've been testing the code for the last 30 minutes to only now figure out what as the problem!!

You're missing the = sign betwen the class and the class name! hahahaha! This is how the code should be:

<h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone"><a href="tel: +352 621 232 309">+352 621 232 309</a></li>
    <li class="mail"><a href="mailto:p.cleene@gmail.com">p.cleene@gmail.com</a></li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet?

This kind of thing that is right on the eye makes us go nuts! It happens very often with me at work! And sorry for the misinformation of the anchor tag, I really thought you couldn't do this... :D

Cassio Victor Cadore
Cassio Victor Cadore
6,579 Points
Cassio Victor Cadore
Cassio Victor Cadore
6,579 Points

Hey Paul!

the anchor tag doesn't accept a background! You should instead put the image after or before the items using pseudo-classes. It would be something like this:

.contact-info li.phone::before {content: url('../img 2/phone.png'); }
Paul Cleenewerck
Paul Cleenewerck
684 Points
Paul Cleenewerck
Paul Cleenewerck
684 Points

Hi Victor,

Thanks a lot for your answer. I've tried to use what you've just recommended but unfortunately it doesn't seem to work. Nevertheless, the video associated to my query does show an anchor tag with a Background image…

Anyway I will see what I can do about that… If you have any other idea, I will be glad to read about it! If not, thanks again, and do enjoy the world cup!!!