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

CSS

Posted by Brittany Burke
Brittany Burke
Courses Plus Student 1,687 Points

iconography help/ images won't show

The mail/twitter/phone icons won't appear on my contact.html webpage its still shows up with the bullet points. 

/******************************
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('../images/phone.png');
}

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

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

}

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brittany,

In your file path you're using "images" but I think the folder was "img" unless you changed it.

That might explain why you're not getting the images.

If you're still getting the bullet points though then that means the list-style: none isn't taking effect,

Do you have the contact-info class applied to the <ul>?

Brittany Burke
Brittany Burke
Courses Plus Student 1,687 Points

I found my problem in the css code. I didn't place the </ul> in the right place. I now have the images but they keep repeating in the background even after place the background-repeat: no-repeat;

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

'''

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You should not have the comma in your selectors. This creates 2 separate selectors. You're assigning the background image to both the li and the a element.

The original selectors you had were correct.

.contact-info li.phone a

Dai Phong
Dai Phong
20,395 Points
Dai Phong
Dai Phong
20,395 Points

I see you don't put the "," after li

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

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

.contact-info li, .twitter a {
    background-image: url('../images/twitter.png');
}
Brittany Burke
Brittany Burke
Courses Plus Student 1,687 Points

It still won't appear on the website. I even copied your code directly and added it in ,

Dai Phong
Dai Phong
20,395 Points

where is the images folder, is it the same as folder with html file?

Brittany Burke
Brittany Burke
Courses Plus Student 1,687 Points

The img folder is above the index.html ,contact.html and about.html files I have looked in other forums and it seems many people have this problem with this code. I don't know how to fix it ):

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

There should not be a comma there.

Brittany Burke
PLUS
Brittany Burke
Courses Plus Student 1,687 Points
Brittany Burke
Brittany Burke
Courses Plus Student 1,687 Points

That fixed it ! thank you so much. I was stuck for a good hour.