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

Audrey Barker
Audrey Barker
2,963 Points
Posted by Audrey Barker
Audrey Barker
2,963 Points

Icons not popping up

Hi Guys,

I'm having trouble with the icons not popping up. I think the problem has to be with the way i set up the class in html, because I can't even remove the bullet points. Help! Imgur

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Audrey;

Could you post the code you are using so folks can have a look?

Thanks,

Ken

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Audrey,

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

Audrey Barker
Audrey Barker
2,963 Points
Audrey Barker
Audrey Barker
2,963 Points

Here is my css as well

 .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');
}
Audrey Barker
Audrey Barker
2,963 Points
Audrey Barker
Audrey Barker
2,963 Points 
</section>
         <h3>Contact Details</h3>
         <ul class= "contact-info"> </ul>
            <li class="phone"> <a href="tel:(888) 316-3773">(888) 316-3773</a> </li>
            <li class= "mail"> <a href="mailto:jessbarkerresearch@gmail".com> jessbarkerresearch@gmail.com </a></li>
            <li class="twitter"><a href= "http://twitter.com/intent/tweet?screen_name=JBDResearch">@JBDResearch</a></li>
      <section>
Nick Ocampo
Nick Ocampo
15,661 Points

In your ".contact info a" rule, you have to colons on the padding declaration. Remove that extra colon and see if it works.

Audrey Barker
Audrey Barker
2,963 Points
Audrey Barker
Audrey Barker
2,963 Points

Hi Nick,

Thanks for the help. Unfortunately, I removed the extra colon and it didn't seem to have any effect.

1 Answer

Keith Jones
Keith Jones
3,744 Points
Keith Jones
Keith Jones
3,744 Points

Looks to me like you are closing your Unordered List before you are adding your List Items. Put the </ul> AFTER the last </li> and before the </section>

Keith

Audrey Barker
Audrey Barker
2,963 Points
Audrey Barker
Audrey Barker
2,963 Points

Thanks Keith! that worked :)

Jon Newby
Jon Newby
3,269 Points
Jon Newby
Jon Newby
3,269 Points

That's exactly the same issue I was having! Thanks Keith.