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

Tarah Seekins
Tarah Seekins
1,811 Points
Posted by Tarah Seekins
Tarah Seekins
1,811 Points

My iconography isn't showing up?

For some reason I can't get the iconography to show up. I'm also having a problem with the h3 not moving.

Thanks

-solved-

thomasmannion
thomasmannion
4,649 Points

Have you checked the relative path for the image files themselves?

thomasmannion
thomasmannion
4,649 Points

Nick made mention in the video that he was adding the <h3> tags into the body element section because of a later need for the syntax to be applied. He referred to this when he was cleaning up the "About" header under the image file on the about.html page of the site.

Additionally, I noticed that your "values" are varying:

h3 { margin: 0 0 1m 0; }

The "value" of 'm' I believe should be 'em'. You have several variations throughout your code. You may want to review them and tighten them up a little. I use the text editor's 'find and replace' feature sometimes when I make a repeated error that I need to correct.

I hope that this helps.

Tarah Seekins
Tarah Seekins
1,811 Points
Tarah Seekins
Tarah Seekins
1,811 Points

I've fixed the m/em error - thank you!

I'm not quite sure exactly what you are talking about for the body element section

3 Answers

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

Here is my CSS:

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

Somehow you must of missed the section of the video video where he puts in this section:

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

Because I didn't see it in your code under this section:

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

Also could you explain what is happening exactly to you h3?

Tarah Seekins
Tarah Seekins
1,811 Points
Tarah Seekins
Tarah Seekins
1,811 Points

Ive added in the .contact-info a that you suggested, its not seeming to have any effect.

My h3 just is plain not doing anything. I've tried changing the margin properties but it's doing nothing.

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

This also might be the problem, here is your code:

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

and here is mine:

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

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

I noticed that on yours you have a space between the li and the class names: .phone, .mail and .twitter, and I don't. I not sure how much of a difference it will make but I would go ahead and try to see.

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

And I am not exactly sure what is wrong with your h3. It should have inherited the color from your code in the color section of the css:

body {
  background-color: white;
  color: #999;
}

Is that all that is wrong with it, the color?

Tarah Seekins
Tarah Seekins
1,811 Points
Tarah Seekins
Tarah Seekins
1,811 Points

Everything is working now! Thank you so much!

Catherine Brooks
Catherine Brooks
2,799 Points

I have this code and it is not working, and I had already closed the space between the li and period, but my icons still do not show up; I'm stuck!

/********************************** PAGE: 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'); }

Contact.html

<section>

<h3>Contact Details</h3> <ul class="contact info">

      <li class="phone"><a href="tel:555-6425">555-6425</a></li>

<li class="mail"><a href="mailto:="kmonticue@uswest.net">Cat</a></li>

<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickr">@nickrp</a></li>

</ul>

</section>