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 trialLauren Adkisson
1,585 Pointsthe 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');
}
Lauren Adkisson
1,585 Pointsmaybe 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
778 PointsYour 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
778 PointsHey,
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>
Raymond LeDuc
2,499 PointsRaymond LeDuc
2,499 PointsPlease post your code so someone can help you.