Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Add Iconography

Can't get icons to show up. This is what I have written in my main.css.

Is there something I am missing?

*********************
PAGE: CONTACT
**********************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .09em;
}
.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');
}

Could you describe how your website's folders are set up(directory-wise)? Do you have your CSS files in the same folder as your HTML documents or there's also a directory for your CSS files?

17 Answers

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

Problem solved.

Just a misplaced closing ul tag.

<ul class="contact-info"></ul>
          <li class=“phone”><a href="#"</a></li>
          <li class=“mail”><a href="#">Email</a></li>
          <li class=“twitter”><a href="#”>twitter</a></li>
<ul class="contact-info">
          <li class=“phone”><a href="#"</a></li>
          <li class=“mail”><a href=“#">Email</a></li>
          <li class=“twitter”><a href="#”>twitter</a></li>
</ul>

I have sent the files back to you with the <ul> issue fixed. Looks like everything is working nicely now :)

It's not set up like that on the page. There are breaks where there needs to be.

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

Hey Sydney,

have you checked your image paths are 100% correct with an inspector?

I have a css folder for my main.css and then my other pages are all outside of that folder within the project folder - "how to make a website"

Where is the inspector? So I can check?

Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

Depends on the browser you are using.

Safari = ALT + COMMAND + I

FireFox = ALT + COMMAND + C

Chrome = ALT+ COMMAND + U

Or you can right click, “View source/inspect”

You’ll want to inspect your background url. Clicking the patch should take you to the file if the path is correct.

If your paths are working correctly, the only other thing I can think of is removing the space after “url” as David suggested...

Try removing the space after "url" when setting the value for the background-image property.

.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');
}

If that doesn't work; I'll take a look at the challenge.

Still didn't work. Also I just noticed. When I highlight the three options to contact me -including my phone, email and twitter. It still shows there are bullet points even though I removed them with the list style element under my .contact-info class. My background is white. I don't know how JUST the bullet points are white when the rest of my text is grey?

I just fixed the bullet point color so they are the same as the rest of the sites font color by adjusting the color section in my css

body { background color: #fff; color: #3f414d; }

But the bullets are still there and they shouldn't be. There should be icons.

Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

Check that you've not overwritten your <li> style.

They're in an <li> right?

I have an image (my logo I made in PS) in my header section instead of just the normal writing. Would this effect that?

This is my index page

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sydney E. Stevens | Editor</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Allura' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1> <img src="img/sydneyestevens.png"> </h1> </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></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>MY WORK</h3> <ul id="gallery"> <li> <a href="img/Blue.jpg"> <img src="img/Blue.jpg" alt=""> <p>Winter 2014 - Bluebird visits</p> </a>
</li> <li> <a href="img/roadtrip.jpg"> <img src="img/roadtrip.jpg" alt=""> <p>Summer 2013 - goodbye summer</p> </a>
</li> <li> <a href="img/lackchamplain2.jpg"> <img src="img/lakechamplain2.jpg" alt=""> <p>Summer 2011 - Lake Champlain</p> </a>
</li> <li> <a href="img/skittles.jpg"> <img src="img/skittles.jpg" alt=""> <p>Winter 2014 - an unhealthy obssession</p> </a>
</li> <li> <a href="img/grandcanynon.jpg"> <img src="img/grandcanynon.jpg" alt=""> <p>Summer 2011 - Grand Canyon</p> </a>
</li><li> <a href="img/waitingforspring.jpg"> <img src="img/waitingforspring.jpg" alt=""> <p>Winter 2014 - Waiting for Spring</p> </a>
</li> </ul> </section> <footer> <a href="https://twitter.com/sydder123"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/sydney.elizabeth.908"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Sydney Stevens.</p> </footer> </div> </body>
</html>

Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

Hmm... Are you comfortable emailing me your project folder so I can take a look?

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

I don't see how that woul effect anything, no.

If you have the ability to upload or share your files somewhere, I'd be more than happy to help troubleshoot this for you. :)

haha I haven't learned how to put it on my hosting site yet...Where could I share this?

Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

If you know how to use github, then that would work.

Alternatively, google drive or Dropbox will enable you to share files and folders with people.

I will try google drive. Who can I send it to?

Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

You can send it to anyone I believe.

If you want to sent it to my gmail: j**********n@gmail.com is my google email.

Awesome I will send it to you now!

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

Cant really work with how you’ve sent the files... I’m missing a lot of things it seems.

Can you just zip them and send them to me by any chance?

Sorry I don't really know what I am doing? All the html I have written is on the Treehouse workspace. I don't know how to zip them from there other than just copying and pasting them somewhere. The images he gave me are all on the workspace as well.

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

Okay, no problem. How about just attaching the folder that all your files and images are in into an email? you can send it to the same email as before. This should deliver everything you have in main site folder. I should be able to see everything how you see it then. :)

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

“The images he gave me are all on the workspace as well.”

You mean you don’t actually have the image on your computer in the “img” folder you are pointing the CSS to?
If that’s the case, then we just figured out your problem.

Thanks for being so helpful, Joseph.