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

Fengming Ye
Fengming Ye
851 Points
Posted by Fengming Ye
Fengming Ye
851 Points

I have double email icons there. But I am sure I import the twitter image file for that.

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

3 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Fengming,

Are you saying that you have another mail icon where the twitter icon should be?

Post the html that you have for that.

Maybe you used the "mail" class twice on 2 of your list items and didn't use the "twitter" class.

Fengming Ye
Fengming Ye
851 Points
Fengming Ye
Fengming Ye
851 Points

</section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:001-2177-7784115">001-2177-7784115</li> <li class="mail"><a href="mailto:yeke2012@gmail.com">yeke2012@gmail.com</a> </li> <li clas="twitter"><a href="https://twitter.com/intent/tweet?scree_nname=yeonfire">@yeonfire</a></li> </ul> </section>

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

On your 3rd list item you have a typo on class="twitter". You're missing one 's'

Fengming Ye
Fengming Ye
851 Points
Fengming Ye
Fengming Ye
851 Points

Umm. But there is still something weird. I get twitter icons there but the formatting is like below with two email icons.

Contact Details

001-2177-7784115 yeke2012@gmail.com @yeonfire

Fengming Ye
Fengming Ye
851 Points
Fengming Ye
Fengming Ye
851 Points

But after I comment on the line of min-height. everything is correctly formatted.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

That shouldn't be causing any trouble. That's there to make sure the links are at least 20px tall so that you'll be able to see all of the icon.

When it's not commented what are you currently seeing on your icons?

Do you have a single phone icon to the left of the phone number? And then what's the rest of it look like?

Fengming Ye
Fengming Ye
851 Points
Fengming Ye
Fengming Ye
851 Points

I do think min-height will perform the same function as you mentioned. But just comment on that min-height code I got everything desired. Otherwise I have double email icons and some formatting issues. I have the phone icons to the left of the phone number. But email and telephone lines just went very weird. Can you give me your email address so that I can send you the source code?