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 How to Make a Website Adding Pages to a Website Add Iconography

Posted by Pete Buechler
Pete Buechler
1,659 Points

How do I get Add-Iconography section CSS to work? Following Nick's CSS verbatim, the icons still overlay the text.

Here's the css: .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'); }

2 Answers

Thomas Horner
Thomas Horner
11,185 Points
Thomas Horner
Thomas Horner
11,185 Points

I couldn't get it to work Nick's way either. I ended up having to duplicate the code. I took the contact-info a out and put the code from that block into each individual li.class; like this :

.contact-info li.phone { background-image: url('../img/phone.png'); background-repeat: no-repeat; 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.mail { background-image: url('../img/mail.png'); background-repeat: no-repeat; 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.twitter { background-image: url('../img/twitter.png'); background-repeat: no-repeat; display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

It's not right since you're duplicating code, but it works.

Pete Buechler
Pete Buechler
1,659 Points

This works, though as you say it's redundant. The other suggestion, applying the styling to the li, produced some strange results in my page. Thanks for your comment.

Thomas Horner
Thomas Horner
11,185 Points
Thomas Horner
Thomas Horner
11,185 Points

Actually, I just figured it out so you don't duplicate your code. Instead of using .contact-info a use .contact-info li