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 joelynempleo
joelynempleo
4,659 Points

two twitter icons showed up

Is there something wrong with these codes? two twiter icons shows up on the Contact page.

.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

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

nothing looks wrong with your css. Id double check your html to be sure you didnt accidently create two of the same list items or give them both the same class or something.

joelynempleo
joelynempleo
4,659 Points

Codes from contact.html. 

<h3>Contact Details</h3>
      <ul class="contact-info">
      <li class="phone"> <a href="tel:555-5555">555-5555 </a></li> 
      <li class="mail"> <a href="mailto:concepteclectic@gmail.com">concepteclectic@gmail.com </a></li>
      <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=thymesheet">@thymesheet<a/></li>

      </ul>
Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

you have a mistake in your closing tag for your twitter link. its not closed properly. you have:

<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=thymesheet">@thymesheet<a/></li>

you need

<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=thymesheet">@thymesheet</a></li>

you flipped the a and the / around. that and the background repeat Kevin Granger mentioned could be the issue

joelynempleo
joelynempleo
4,659 Points

Awesome, thanks!

Kevin Granger
Kevin Granger
20,332 Points
Kevin Granger
Kevin Granger
20,332 Points

You should also try to set the no-repeat option for your background-image.

ex. .contact-info li.twitter a { background-image:url('../img/twitter.png') no-repeat; }

joelynempleo
joelynempleo
4,659 Points

thanks!