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

Ellen Topitzer
Ellen Topitzer
1,205 Points

Contact icons show up in workspace website, but when I copy and paste the code into atom, they disappear

Ok, so I've written the code EXACTLY as it was shown in the video. When I launch my workspace website in firefox, the contact icons show up perfectly, exactly as they are meant to. However, when I copy and paste my code into a different text editor, Atom, the contact icons disappear. The path to the image is correct, all the code is correct and triple checked, I've saved and refreshed, cleared my catch, tried different browsers, but the problem persists. The icons will only show up when I launch the treehouse workspace. It will work in any browser. But no matter what I try they do not show up when I launch the EXACT same code from a different text editor.

I have checked the other questions here and can't find the answer. Is there something that I'm missing? Any advise would be super appreciated!

Matt S
Matt S
166 Points

Hey Ellen,

Could you post your code? Often a fresh set of eyes can spot errors that we fail to see.

Ellen Topitzer
Ellen Topitzer
1,205 Points

Hi Matt, Here is a link to my code https://w.trhou.se/jhauzg9xda

What perplexes me is that it works perfectly here in tree house workspace, but then works differently in a different text editor. If its literally the exact same code, shouldn't it be functioning in the exact same way?

I'm wondering how your connecting your images. Did you download them to your own pc? Cause I can't imagine what the path would look like from atom to workspaces.

Ellen Topitzer
Ellen Topitzer
1,205 Points

Hi John, Yes I have the images downloaded to my desktop, with the correct file path in atom

If you post this css code from atom it may shed some light on the subject.

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

also you say you have the images on your desktop, so the path may have changed depending on how your files and folders are arranged in relation to the images

Matt S
Matt S
166 Points

Ellen,

I did a search on your issue, and would have to agree with John. It's got to be how you're linking your files. If it's showing up in workspaces, you are correct, the code works. Something is "breaking" when you have them in Atom and it's got to be with the filesystem.

I concur with the rest of the comments on here. I believe it is down to the layout of the file system. essentially if the files are in the same directory you don't need the ../ or if in a different directory you can write /images or ../images/

The ../ represents going back a level in the directory and then look for the next folder.

Hope this helps a little?

Ellen Topitzer
Ellen Topitzer
1,205 Points

Fixed it! Thank you SO much everyone for all of your help!!!

Good Job Ellen, What was it that was preventing your images from displaying?

Ellen Topitzer
Ellen Topitzer
1,205 Points

It turns out it was an issue with the file path, I'm so embarrassed I didn't see it before. But I so appreciate all of you trying to help me and all of your advice. Thank you!!!

No need to be embarrassed, File paths can be a bit confusing on background images.