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

Posted by Stuart kruspe
Stuart kruspe
1,051 Points

Icons/ Img not appearing on Contact Page.

main.css code:

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

Stuart kruspe
Stuart kruspe
1,051 Points

contact.html code:

<section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:416-272-0417">416-272-0417</a></li> <li class="mail"><a href="mailto:kruspe_stuart@hotmail.com">kruspe_stuart@hotmail.com</a></li> <li class="facebook"><a href="http://facebook.com/stuart.kruspe">Stuart Kruspe</a></li> </ul> </section>

Sandro Würmli
Sandro Würmli
15,353 Points
Sandro Würmli
Sandro Würmli
15,353 Points

Did you inspect, if the CSS is loaded on the element? If you don't work with workspaces, check if the images are in the right folder.

your syntax is correct , i have absolutely the same. Maybe it's just a typo.

Also check the classes above:

.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;
}

5 Answers

Stuart kruspe
Stuart kruspe
1,051 Points
Stuart kruspe
Stuart kruspe
1,051 Points

The images wont appear on google chrome, but they appear when I open the site using safari. Is there anyway to fix this? Perhaps extra code I can add so the images appear on all browsers?

Sandro Würmli
Sandro Würmli
15,353 Points
Sandro Würmli
Sandro Würmli
15,353 Points

If it works in other browsers, i think it's a typo. Other browsers autocorrect missing closing tags or '>' or other issues if they detect it. Check other classes in your CSS, they are neededin this case.

William Santana
William Santana
3,032 Points
William Santana
William Santana
3,032 Points

Make sure that the path of the image file you are trying to use is inside the correct the folder. Also, can you provide a snippet of the whole code?

Stuart kruspe
Stuart kruspe
1,051 Points
Stuart kruspe
Stuart kruspe
1,051 Points

Link to complete code: https://teamtreehouse.com/workspaces/10785252#

Contact.html:

<section> <h3>General Information</h3> <p>I am currently available for new web design work. Whether you are looking to bring new mobile (and)or desktop interface ideas to fruition, I offer the most eye pleasing, user friendly web designs.</p> <p>For urgent matters, please contact me directly by phone. For all other inquiries I can be reached by email or social media.</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:416-272-0417">416-272-0417</a></li> <li class="mail"><a href="mailto:kruspe_stuart@hotmail.com">kruspe_stuart@hotmail.com</a></li> <li class="facebook"><a href="http://facebook.com/stuart.kruspe">Stuart Kruspe</a></li> </ul> </section>

main.css:

/******************************* PAGE: CONTACT ********************************/

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

Stuart kruspe
Stuart kruspe
1,051 Points
Stuart kruspe
Stuart kruspe
1,051 Points

Its working now. Not sure what was happening. I inspected all code and img paths and they seemed correct so didnt make any changes. Thanks for all the help!!

William Santana
William Santana
3,032 Points

There you go! hehe. I am glad I could "help?" :P

William Santana
William Santana
3,032 Points
William Santana
William Santana
3,032 Points

You are missing a few things in your code. I suggest re-watching the videos on this lesson (or restarting the lesson again) and starting over. Take your time, because these core understanding lessons are optimum for improving your skills on the long run. Remember, this is supposed to be fun! So don't sweat it! If you can't figure it out I can send you mine. However, this part is very basic, so I wouldn't skip over it simply because you can't figure it out. Search it on google, too. You will find that there is A LOT of information already available on this subject. Let me know!

Stuart kruspe
Stuart kruspe
1,051 Points

Hey William, I accidentally deleted my main.css file and couldn't recover it. I started over trying to recreate what I had. If you could please tell me what I am missing, that would be great.

Thanks!