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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Posted by Felix Johansson
Felix Johansson
3,341 Points

Can't see why my Mail and Twitter pictures wont work.

http://imgur.com/2I2uC3B

12 Answers

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Felix,

Bothxp was right, but take a look at your css file again. It looks like you have "ulr" instead of "url" here. If you change it to "url" it will work properly.

.contact-info li.mail a {
  background-image: ulr('../img/mail.png');
}
.contact-info li.twitter a {
  background-image: ulr('../img/twitter.png');
}
Felix Johansson
Felix Johansson
3,341 Points

I did that but it did not work:

.contact-info li.mail a { background-image: ulr('../img/mail.png'); } .contact-info li.twitter a { background-image: ulr('../img/twitter.png'); }

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Felix,

You still have "ulr". It needs to be "url".

Felix Johansson
Felix Johansson
3,341 Points

Ahh thank you! I have some problems to see my spelling sometimes.

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

They are added via css, so we could do with seeing your main.css page.

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

You'll be looking for the section

.contact-info a {
    display: block;
    min-height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    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');
}
Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

Yes I have done that but I can't get it to work.

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Hi Felix,

In your screenshot you showed us contact.html and index.html .... but we could really do with seeing the 'Page: Contact section of your main.css file.

Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

Oh sorry that's a miss from me here it is: http://imgur.com/JKPYcnT

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

ok .. I think you might have missed the 'a' tag in the selector. Try:

.contact-info a {
    display: block;
    min-height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}
Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

No it didn't work may be some problem with the direction ?

ult('../img/mail.png')

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

should that be url not ult

.contact-info li.mail a{
    background-image: url('../img/mail.png');
}
.contact-info li.twitter a{
    background-image: url('../img/twitter.png');
}
Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

Aww that was not the problem either.

Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

I did that but it did not work:

.contact-info li.mail a { background-image: ulr('../img/mail.png'); } .contact-info li.twitter a { background-image: ulr('../img/twitter.png'); }

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

you changed it to ulr

It needs to be url