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

Ben Wong
Ben Wong
19,426 Points

Phone and mail icons appear and not the Twitter icon

Hi,

I tried using the same codes for the Twitter icon as the Phone/Email icon (but obviously changing the codes for Twitter), but the icon wouldn't appear. Here are my codes. Please advise.

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

}

7 Answers

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi Ben!

So there are few things that could affect this.

  1. Do you have an image (twitter.png) in the same directory as other images?
  2. Is your HTML correct? Do you have an anchor tag within a list item with a class twitter?

I don't see anything wrong with your code so check those two things and it should work.

Ben Wong
Ben Wong
19,426 Points

Thank you for the amazing response time Markus.

1) Twitter.png is in the img folder so it's in the same directory 2) <li class="Twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>

Yes. I've got the anchor tag within a list item.

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

No problem. So it still doesn't work?

Try to change the CSS like this and see what happens.

.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/phone.png'); // Test with another image that you know it works
}

Btw if you want to join our Slack group hit me with your email and I'll invite you there :)

Ben Wong
Ben Wong
19,426 Points

Got it to work after a few tinkering and refreshing.

I really appreciate the effort and the speed of your responses.

I'm still on the trial version but I am very impressed about the quality of your site and service. I will definitely go on the membership once the trial is over and definitely will recommend this to my friends.

Thanks Markus. And what is the Slack group?

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Okay that's great. I'm not sure what site you are talking about as it was mine. Just to be clear, I'm also a student of Treehouse.

Slack is a messaging platform in which I've made a group and trying to gather all the people who are interested. There people who are learning coding and web design can share their thoughts and help each other.

Ben Wong
Ben Wong
19,426 Points

Okey. Let's invite me to the Slack platform.

Also, could you see what I did wrong? I couldn't get the logo to move to the left.

Here are my codes.

@media screen and (min-width: 660px){ /************ HEADER *************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

I'll help you with that in Slack. This goes out of this thread's topic. I need your email to send you the invitation.