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

Macauley Morgan
Macauley Morgan
2,017 Points
Posted by Macauley Morgan
Macauley Morgan
2,017 Points

When I use the code phone image doesn't show and twitter does twice with a large gap between it and mail, help?

When I use the code shown on the video my icon that I downloaded from the resources for the phone won't be displayed and the twitter icon is repeated twice with a large gap between twitter and mail which is not present between phone and mail...

3 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

We'd need to see your code in order to find out what's going on. Can you provide that or a snapshot of your workspace?

Macauley Morgan
Macauley Morgan
2,017 Points
Macauley Morgan
Macauley Morgan
2,017 Points

I added it as an answer below by accident

Macauley Morgan
Macauley Morgan
2,017 Points
Macauley Morgan
Macauley Morgan
2,017 Points

HTML <ul class="contact-info"> <li class="Phone"><a href="tel:07445840276">07445840276</a></li> <li class="mail"><a href="mailto:macauley.slrdesign@gmail.com">macauley@example.com</li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=Mexample">@Mexample</a></li> </ul>

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

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hmmm, the only thing that looks like it might be causing problems is that you're forgetting a semicolon (;) after your background-image declarations in each of your list items in your CSS. Try adding those and refresh the page to see if it helps.