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

Meg Cusack
Meg Cusack
11,448 Points
Posted by Meg Cusack
Meg Cusack
11,448 Points

Twitter icon shows but Facebook icon won't display in Build the Footer lesson.

In my code, the twitter icon shows fine when displaying the page, but when I put in the facebook-wrap.png or just the facebook.png, I just get a question mark there when the page displays. If I put in the mail.png or even nick.jpg, instead of the facebook one it will show. I imported the project files so these png files are in exactly the same place as the twitter-wrap.png file. Here is my code:

<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.png" alt="facebook logo"></a></footer>

What am I doing wrong?

Meg Cusack
Meg Cusack
11,448 Points
Meg Cusack
Meg Cusack
11,448 Points

The formatting looks weird but the code is what I have (ignore the html- it is to get the code to print in my question here).

3 Answers

Clay Logsdon
Clay Logsdon
971 Points

What I did because the twitter icon only worked for me but not the facebook. (In other words, I had the same problem) I used a url instead of uploading a file and using the file provided by nick. I used this the link below and pasted it into my code and it worked perfectly. You will end up re-sizing the logo or image, whatever you want to call it, so I made sure to get a 60x60 image.

http://png-4.findicons.com/files/icons/1983/aquaticus_social/60/facebook.png

<a href="https://www.facebook.com/"><img src="http://png-4.findicons.com/files/icons/1983/aquaticus_social/60/facebook.png" alt="Facebook Logo" class="social-icon"></a>

Should look like the code above^^^ when you put it into your HTML

Meg Cusack
Meg Cusack
11,448 Points
Meg Cusack
Meg Cusack
11,448 Points

That worked! Thank you! I also later realized that I somehow had the facebook png files outside of my image folder- that is why they didn't work. I appreciate your help, Clay.

Alexander Dernild
Alexander Dernild
1,821 Points
Alexander Dernild
Alexander Dernild
1,821 Points

Check the directory and make sure the facebook.png is a png file and it is called facebook.png would be my best guess.

Meg Cusack
Meg Cusack
11,448 Points
Meg Cusack
Meg Cusack
11,448 Points

I somehow had the facebook.png files outside of my image folder that was my problem. Whoops!