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 Creating HTML Content Build the Footer

Posted by ayy lmao
ayy lmao
2,906 Points

Twitter & 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>&copy; 2014 Nick Pettit.</p>
</footer>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I edited your code Zachary so we could read it properly.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

can you post your css too please Zachary.

7 Answers

Steve Smith
Steve Smith
12,955 Points
Steve Smith
Steve Smith
12,955 Points

Typically 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
Ryan Carson
23,287 Points
Ryan Carson
Ryan Carson
23,287 Points

Your 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
ayy lmao
2,906 Points

It still doesn't seem to be working. Maybe it has something to do with my browser?

Steve Smith
Steve Smith
12,955 Points
Steve Smith
Steve Smith
12,955 Points

Try adding ./ to the start of the path - like this:

<img src="./img/twitter-wrap.png"
ayy lmao
ayy lmao
2,906 Points

I just tried it and it didn't work.

Paul Mink
PLUS
Paul Mink
Courses Plus Student 908 Points
Paul Mink
Paul Mink
Courses Plus Student 908 Points

Hi 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
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>&copy; 2014 Nick Pettit.</p>
    </footer>
  </body>
</html>
Paul Mink
Paul Mink
Courses Plus Student 908 Points
Paul Mink
Paul Mink
Courses Plus Student 908 Points

Can you show us the listing of all the files in your img folder?

ayy lmao
ayy lmao
2,906 Points

How can I do that? I don't think I can upload of screen cap of it to the comments.

Steve Smith
Steve Smith
12,955 Points
Steve Smith
Steve Smith
12,955 Points

The 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
ayy lmao
2,906 Points

I 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
ayy lmao
2,906 Points

I 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
Steve Smith
12,955 Points

It 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
eugeneteo
112 Points
eugeneteo
eugeneteo
112 Points

I'm having the same problem with Chrome but if I used Safari, the icons appeared.

Natalie Felker
Natalie Felker
372 Points
Natalie Felker
Natalie Felker
372 Points

Zachary 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.