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
Ellen Topitzer
1,205 PointsContact 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!
Ellen Topitzer
1,205 PointsHi 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?
john larson
16,594 PointsI'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
1,205 PointsHi John, Yes I have the images downloaded to my desktop, with the correct file path in atom
john larson
16,594 PointsIf 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
166 PointsEllen,
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.
Ed Bennett
10,612 PointsI 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
1,205 PointsFixed it! Thank you SO much everyone for all of your help!!!
john larson
16,594 PointsGood Job Ellen, What was it that was preventing your images from displaying?
Ellen Topitzer
1,205 PointsIt 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!!!
john larson
16,594 PointsNo need to be embarrassed, File paths can be a bit confusing on background images.
Matt S
166 PointsMatt S
166 PointsHey Ellen,
Could you post your code? Often a fresh set of eyes can spot errors that we fail to see.