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 Lauren Adkisson
Lauren Adkisson
1,585 Points

the phone, mail, twitter icons do not show up on my website, only the bulletpoints

I'm working on the contact page and I'm trying to insert the little grey icons in front on my contact links and only the old bullet points show up

/**************************************
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');
}
Raymond LeDuc
Raymond LeDuc
2,499 Points
Raymond LeDuc
Raymond LeDuc
2,499 Points

Please post your code so someone can help you.

Lauren Adkisson
Lauren Adkisson
1,585 Points

maybe it has something to do with the file where the pics are located but they are in the img file so I dont know why it doesn't work

Dan Jones
Dan Jones
778 Points
Dan Jones
Dan Jones
778 Points

Your CSS looks fine to me. Just ensure that your CSS is in a folder called css and that your HTML files sit outside of that. Additionally, ensure that your images are in a folder called img.

Sounds like a problem with the HTML though. Can you post that?

Thanks!

1 Answer

Dan Jones
Dan Jones
778 Points
Dan Jones
Dan Jones
778 Points

Hey,

Posting your code would be a great help here!

However, a quick answer would be to make sure you've set the <ul> (.contact-info) element in your css to "list-style: none" which will remove the bullet points and place the images as a background image within the <a> (.contact-info li.phone a, .contact-info li.mail a, .contact-info li.twitter a), setting the appropriate margin, padding etc... to separate the text and images which Nick explains in the course.

Good luck!

Edit: The problem will almost certainly be with your HTML. You've set the list-style to the contact-info as none, but given you've said you're still seeing the bullet points says to me that, the markup is wrong and that particular rule isn't being applied.

Look for the typo though! It'll help you learn better! :)

Here's what it should look like:

                <ul class="contact-info">
                    <li class="phone">
                        <a href="tel:555-6425">
                            555-6425
                        </a>
                    </li>
                    <li class="mail">
                        <a href="mailto:yourname@example.com">
                            yourname@example.com
                        </a>
                    </li>
                    <li class="twitter">
                        <a href="http://twitter.com/intent/tweet?screen_name=yourname">
                            @yourname
                        </a>
                    </li>
                </ul>