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 trialayy lmao
2,906 PointsTwitter & Facebook Icons Not Appearing
All of my images are appearing, excluding the social media icons. Both of the Twitter and Facebook icons aren't appearing in the preview window, even after saving and refreshing. I'll post my footer code; I hope someone can help me because I keep looking over my code, the video, and the other questions people have submitted.
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
Wayne Priestley
19,579 Pointscan you post your css too please Zachary.
7 Answers
Steve Smith
12,955 PointsTypically this is an issue with the path to the image file itself.
The reference:
<img src="img/twitter-wrap.png"
Is expecting the twitter-wrap.png file to be in a directory called img, and for that directory to be in the folder where the .html files are located. The first thing I'd check is that your images directory is called img and not images, which is more common.
Ryan Carson
23,287 PointsYour code is correct (I tested it myself in Workspaces) so it might've been a temporary issue with Workspaces. Can you please try to reload the Preview?
ayy lmao
2,906 PointsIt still doesn't seem to be working. Maybe it has something to do with my browser?
Steve Smith
12,955 PointsTry adding ./ to the start of the path - like this:
<img src="./img/twitter-wrap.png"
ayy lmao
2,906 PointsI just tried it and it didn't work.
Paul Mink
Courses Plus Student 908 PointsHi Zac,
I'm sure you have already checked, but are you sure that those specific images (twitter-wrap.png and facebook-wrap.png) got copied to the img folder? Would it be possible to see your entire HTML file?
ayy lmao
2,906 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</body>
</html>
Paul Mink
Courses Plus Student 908 PointsCan you show us the listing of all the files in your img folder?
ayy lmao
2,906 PointsHow can I do that? I don't think I can upload of screen cap of it to the comments.
Steve Smith
12,955 PointsThe only thing that makes any sense is that either the img directory isn't at the same level as your html file, or the social png files are not in the img directory. The HTML is good, and I can't see any other reason for it not to work.
You mentioned that your jpg's are loading - can you view png's in your browser? Maybe try downloading just the twitter-wrap.png file and open it directly in the browser to see if it displays correctly.
ayy lmao
2,906 PointsI just checked my Workspace and when I click the images in my img folder, all of the images display, except for the Facebook and Twitter images. Although, when I upload the Facebook and Twitter images to Workspace again, they display within Workspace when I click them until I put them into the img folder, then they no longer display within Workspace, when I click them in the img folder.
I hope that makes sense, I was trying to type it the best way I could, but it still sounds a bit confusing.
ayy lmao
2,906 PointsI just realized what's wrong. When I upload the Facebook and Twitter images, and then place them into the img folder, they won't display and eventually disappear from my img folder. I'm not sure what to do about that, though.
Steve Smith
12,955 PointsIt sounds like an issue with your workspace - I'd contact tech support and ask them to have a look - https://teamtreehouse.com/support (or click the 'contact support' link from the sidebar)
eugeneteo
112 PointsI'm having the same problem with Chrome but if I used Safari, the icons appeared.
Natalie Felker
372 PointsZachary Oxendine Had this exact same problem - only the social media images weren't appearing. I switched browsers (From Firefox to Safari) and now it's fine. I still can't actually preview any of the images in the img folder when I click on them in Workspace, but when I preview my actual site, all the images are accounted for.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsI edited your code Zachary so we could read it properly.