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 Adding Pages to a Website Add Iconography

The icons on the Contact page are not appearing on the site.

Although i place all code for the phone, mail and twitter items on css, the icons are no appearing next to the information on the page. What can i be doing wrong?

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

body {
  font-family: 'Source Sans Pro', sans-serif;
   } 

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

a {
text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
  }

/**********************************
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: 'Raleway', '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: 0;
  } 

nav li {
display : inline-block;
 } 

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



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

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

.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: #bbc3c7;
  }


/**********************************
ABOUT
**********************************/

.profile-photo  {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%
      }


/**********************************
CONTACT
**********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
   }

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
   }

.contact-info li phone a {
  background-image: url('../img/phone.png');
     }

.contact-info li mail a {
  background-image: url('../img/mail.png');
 }

  .contact-info li twitter a {
  background-image: url('../img/twitter.png');
     }

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


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

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
 } 

/* nav background on mobile */
nav {
background: #599a68;
 } 

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

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


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

/* selected nav link */

nav a.selected, nav a:hover {
color: #32673f;
 } 

* section */
section: {
color: #999;
   }
Steven Parker
Steven Parker
231,248 Points

Eeek! :anguished: It would help if you blockquote your code. Or better yet, make a snapshot of your workspace and post the link to it here.

Steven Parker
Steven Parker
231,248 Points

@Jennifer Nordell I can only be that fast on comments, not answers. I can't tell you how many times I've composed an answer just to find someone else (often you) has posted a similar one while I was working on it!

10 Answers

Sue Dough
Sue Dough
35,800 Points

Sorry for the delay. Here is the solution.

Code thats not working:

.contact-info li .phone a {
  background-image: url('../img/phone.png');
     }

.contact-info li .mail a {
  background-image: url('../img/mail.png');
 }

  .contact-info li .twitter a {
  background-image: url('../img/twitter.png');
     }

Code that will work:

.contact-info .phone a {
  background-image: url('../img/phone.png');
}

.contact-info .mail a {
  background-image: url('../img/mail.png');
}

.contact-info .twitter a {
  background-image: url('../img/twitter.png');
}

Cheers. Hope that helps.

Yesss! Thank you all! :)

ok, i'll do that, sorry

Hello, Your HTML tag starts and ends with:

<htlm></htlm>.

It may help to change it to:

<html></html>.

Thanks,

Dyslexia kicked in! Thanks!

jason chan
jason chan
31,009 Points

There are lots of typos.

I would recommend you go over your code again and make sure you typed them correctly. Debugging.

jason chan
jason chan
31,009 Points

She should try loading the html on her local (computer). Html, css, and images don't need a workspace server. If not she try different browsers follow the videos again. Maybe watching slower or comparing the finished code from the finished .zip that is allowed to download from each video.

Sorry, i was talking about de images that appear before the phone, email and twitter on the contact page, not the icons of facebook and twitter at the bottom. TheyΒ΄re just images like the photo of Nick on the about section... I can't see what i did wrong...

Sue Dough
Sue Dough
35,800 Points

Are you referring to the images in the CSS or something else? Because I do not see them in the HTML markup.

here is the snapshot

https://w.trhou.se/cis4njlsm4

Sue Dough
Sue Dough
35,800 Points

Thanks I see now, ignore my previous comment. I got to head out and will take a look when I am back.

i'm referring to 3 small images: one with a phone, the other with an envelope and the other with the twitter logo. They should appear before the phone number, the email adress and the twitter account on the contact page.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Sue Dough Well if it were an alert... sure. But all she can't see is her facebook and twitter icons on one page. But when I fork her workspace... I see them without adjusting her code (which has issues). But still I'm unable to understand why I can see images using her code on her workspace, but she can't. I will be removing my answers because clearly there's something I'm not understanding here.

Sue Dough
Sue Dough
35,800 Points

What does "Well if there were an alert" mean? Sorry I don't understand. My english is not the best.

I can't see social icons on default. Its all blocked for me. A lot of ad blockers block all things that mention a social network. However the images do show I agree with you. It sounds like she has a local issue which could be an ad blocker and thats why i mentioned it.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Sue Dough Sorry. You're correct. When I think of ad blocker I think of popup blocker. Not all software that blocks ads. Oddly enough, I don't run any anti-ad or popup blocking of any kind :) I was meaning a JavaScript alert that would popup a dialog. That's what I had in mind.

And for your information, your English is excellent!

Sue Dough
Sue Dough
35,800 Points

Hi Jennifer,

Thank you. I see what your saying now. It still mostly is. However a lot of the ad blockers come with "lists". You can choose what list you want to accept and block. I have most list turned on.

The best plugin is this: https://github.com/gorhill/uBlock . There is no incentive from the developers to monetize or screw the end user, its open source, and will make your browsing very fast. It is light weight and easily customizable. It will help protect you from viruses as well. There is another uBlock but don't confuse the two, the one from the Gorhill author is the one I recommend using.

I have blocked 338 external HTTP requests from Treehouse advertiser programs since writing this reply. They ping you with AJAX request on this site every second which I find very obtrusive. Treehouse is far more obtrusive then most sites sadly.

Sue Dough
Sue Dough
35,800 Points

Hi Jennifer,

Not sure if you deleted the answer because I posted it a minute prior, but I wanted to say nice job as your answer works! I was a bit confused like you were what OP was referring to. The li tags could be optional here. Either way will work however less code is best in programming most of the time so i figured to ditch them since it was a tiny css file with not much rules.

Best,

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Sue Dough Yup, I deleted my answer because you got there first. And I feel like I've messed up this thread completely because I didn't understand what the OP was not seeing. Had I understood that part from the beginning this thread would have been considerably shorter :)

P.S. I no sooner hit the post answer button than my email lit up and told me that you'd posted an answer :)