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 James Ryan
James Ryan
994 Points

My icons aren't appearing at all - I can't understand why?

I passed the code challenge etc and everything else is displayed as it should be but I can't get the list icons to display? I'd appreciate it if someone could help me out with this one. TIA!

https://w.trhou.se/pfaclv4f7l

10 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

When I preview your workspace, it looks as expected.

I'm not sure what you mean by "list icons" — could it be "thumbnail images"? If so, I see those perfectly well. The only "icons" I'm expecting are the twitter and facebook ones at the bottom, and they also appear as expected.

Did you remember to refresh your browser preview after making your last changes?

James Ryan
James Ryan
994 Points

Yeah apologies for not using the right terminology - I have a habit of doing that! I meant the images that are supposed to replace the bullet points on the contact page.

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

The bullets are turned off in the CSS by "list-style: none;" in the "#gallery" rule. The artwork images don't replace the bullet points, they are the actual list item content.

But using your snapshot, I see no bullets, but I do see the images — which is exactly what I expect. Do you see something different? Or perhaps you expect something else?

Unsubscribed User
Unsubscribed User
1,277 Points
Unsubscribed User
Unsubscribed User
1,277 Points

I had the same problem.

The problem was that in the contact.html file, I hadn't moved the closing </ul> brackets after the last <li></li>. This was causing the CSS just to look purely at the contact-info <ul> class and not go any further. Take a look at your html and make sure all your code is opened and closed where it needs to be.

Hope this helps!

Sergey Blokhin
Sergey Blokhin
9,612 Points
Sergey Blokhin
Sergey Blokhin
9,612 Points

I think you guys should check path to the image file. That was the problem in my case.

James Ryan
James Ryan
994 Points
James Ryan
James Ryan
994 Points

In a visual sense, at least to me anyway, they replace the bullet points! For some reason they aren't showing up for me. I think I'll take a look in Firefox maybe? Thanks for your input Steven!

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

FYI: I'm using (and recommend) Chrome. I believe that's what the Treehouse developers and instructors use also.

James Ryan
James Ryan
994 Points
James Ryan
James Ryan
994 Points

Thanks Steven I use Chrome too!

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

I'm really perplexed then. :anguished:

Could you have possibly changed your workspace after you made the snapshot? Or how about forking the snapshot yourself and see if that works.

James Ryan
James Ryan
994 Points
James Ryan
James Ryan
994 Points

Not showing up in Firefox either Steven? Bizarre! Gonna go work on my WP site - I've had enough of this problem lol thanks again!

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Please post an update here if you ever figure it out! I'll leave it "followed".

ellie jones
ellie jones
1,915 Points
ellie jones
ellie jones
1,915 Points

mine is doing the exact same : /

ellie jones
ellie jones
1,915 Points
ellie jones
ellie jones
1,915 Points

hello if you are having the same problem as i had you need to select the (a)

.contact-info a {

Chad Minning
Chad Minning
1,581 Points
Chad Minning
Chad Minning
1,581 Points

Hey James!

I know I'm a bit late to answering this, but I figured I'd clear this up in case anyone else comes across the same issue.

It looks as though in your contact.html file you seem to be missing the "=" sign in between "class" and the ID you are attempting to assign to your list items. Because of this, when you call on those list items in the main.css file nothing happens since technically the classes "phone," "mail," and "twitter," don't exist without the proper "=" sign in the <li>.

Hope this helps!

adrianeinnis
adrianeinnis
3,782 Points
adrianeinnis
adrianeinnis
3,782 Points

If anyone still has the same problem- here is another solution:

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

→ don't use '..folder/image.png') → instead just start with ../ → if you do start with ../ the Workspace of treehouse will open a selecter where you can browse and insert the correct image path very quickly