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

Watch Video

Posted January 4, 2015 2:36pm by

Social icons dissapeared

I added the code below but the social icons disappeared. i had to remove the images from the "img" folder because the image didn't show up when in the folder. that is why i didn't mention img/facebook...

Does someone know what i did wrong? I just can't seem to find it

thank you

<a href="http://twitter.com"><img src="twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
 <a href="http://facebook.com"><img src="facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> ```



```.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}```

5 Answers

January 4, 2015 3:12pm

When you removed the img folder, did you make sure the images were in the same folder as your HTML files? :-)

January 4, 2015 3:28pm

Hi Jonathan, thank you for your answer.

I didn't remove the image folder. It is still there with all he images inside except for facebook-wrap.png and twitter-wrap.png. these 2 images are on the same level as index.html and the other files. I tried to put them back in the image folder and added img/ in the html code but still nothing.

January 4, 2015 3:33pm

okay,

if you add all the images you have into the img folder

and add the paths

src="img/twitter-wrap,png" src="img/facebook-wrap.png"

That should work and it should appear :)

January 4, 2015 3:44pm

I tried the first time this way but it didn't show up. What i did now is to download on google fb and tw icons 80x80 also in png. added to the img folder and changed the html but again i see nothing appear.

January 4, 2015 3:15pm

Hi William,

When you had the images in the img folder your file path should be as follows.

<a href="http://twitter.com"><img src="/img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

Did you have your file path as above?

January 4, 2015 3:29pm

Hey Wayne,

i did as you said but still nothing. I dont know why the png images are not showing up, thats really weird

January 4, 2015 3:52pm

William,

Sorry I made a mistake, my code was showing how to link if you were coming from a folder to another folder. I have corrected it now.

January 4, 2015 3:55pm

William,

Could you post all the css & html please. It could be a simple mistake somewhere else.

January 4, 2015 4:18pm

Wayne,

here is the code. I moved the facebook and twitter png back to the img folder. I hope you can help me out :)

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>William Hermans | My first website</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>William Hermans</h1>
      <h2>My first website</h2>
      </a> 
      <nav>
        <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
    <section>
      <ul id="gallery">
        <li>
          <a href="img/numbers-01.jpg">
             <img src="img/numbers-01.jpg" alt="">
             <p>Experimentation with color and textures</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>Experimentation with color and textures</p>
          </a>
        </li>        
        <li>
          <a href="img/numbers-12.jpg">
             <img src="img/numbers-12.jpg" alt="">
             <p>Experimentation with color and textures</p>
          </a>
        </li>         
      </ul>            
    </section>
    <footer>
      <a href="http://twitter.com"><img src="/img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com"><img src="/img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 William Hermans</p>
    </footer>
    </div>
  </body>
</html>

/**********************************
            GENERAL
***********************************/

body {
  font-family:'Open Sans'; 'sans-serif';
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
text-decoration: none;
}

img {
  max-width: 100%;

}

/************************************
               HEADING
*************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/************************************
              NAVIGATION
*************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0px;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/************************************
               FOOTER
*************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
  clear: both;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/************************************
           PAGE: PORTFOLIO
*************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p{
  margin: 0%;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/************************************
               COLORS
*************************************/

/* site body*/
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {

  background: #6ab47b;
  border-color:#599868;
}

/* nav background on mobile */
nav {
  background:#599868;
}

/* logo text */
h1, h2 {
  color: #ffffff
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link color */
nav a.selected, nav a:hover { 
  color: #32673F;
}

January 4, 2015 5:09pm

Hey William,

I have it working, give me a bit of time to go over the code and i'll post it.

January 4, 2015 5:15pm

Hey William,

It was a simple misplaced / in the end.
I removed the / before img/facebook-wrap.png as you can see, I left it in the twitter code so you could see it. Just remove that and you should be good.

  <footer>
      <a href="http://twitter.com"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com"><img src="/img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 William Hermans</p>
    </footer>

January 4, 2015 5:26pm

I tried by removing the / before already but it didn't work either. Now i changed it again like below

<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

when i go in the img folder and click on facebook-wrap.png, no picture is shown, the same for twitter. Other pictures work fine. I think the problem is there.

January 4, 2015 5:28pm

Add a new picture then try linking to that, as everything works fine for me it must be the images your using.

January 4, 2015 7:08pm

Any luck William?

January 5, 2015 10:20am

Hi Wayne, trying with new pictures didn't solve it. What I did is adding a " . " before social in the html like below and the icons appeared now on the browser. The only issue i have now is that the CSS don't change the size of the picture. I mentioned 20 x 20px but the picture still shows 80 x 80 px

<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class=".social-icon"></a>

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

January 5, 2015 1:52pm

Thats very strange. Like i said your code works perfect for me.
Having to add a . to the class in your html, i don't know how that worked either.

You could try adding a height and width to your html and see if that fixes the size issue.

<img src="img/twitter-wrap.png" height="20px" width="20px" alt="Twitter Logo" class=".social-icon">

I will give you a link so you can download the folder and files I put together to try your code. It only includes the images for the footer, so you may want to add your own pictures to the img folder for gallery.

Let me know how it works if you try it.

Link to website folder

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

William Hermans

William Hermans

Social icons dissapeared

5 Answers

Jonathan Grieve

Jonathan Grieve

William Hermans

William Hermans

Jonathan Grieve

Jonathan Grieve

William Hermans

William Hermans

Wayne Priestley

Wayne Priestley

William Hermans

William Hermans

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

William Hermans

William Hermans

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

William Hermans

William Hermans

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

William Hermans

William Hermans

Wayne Priestley

Wayne Priestley