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 Becky Hirsch
Becky Hirsch
14,069 Points

Contact Icons Repeating

I am able to set the small icons next to the different contact options but each image is also repeating in front of everything (within that block). It is happening to each icon because when I remove one, the other shows up and is repeated as well. Thanks!

Here is my css:

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

Here is my html:

  </section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone"><a href="tel:555-6425">555-6425</a></li>
    <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=nickrp">@nickrp</a></li>
  </ul>
  <section>

2 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

You're applying the background image multiple times to the .contact-info ul and also the anchors within each list item, have you tried this:

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

li.phone a { background-image: url('../img/phone.png'); }

li.mail a { background-image: url('../img/mail.png'); }

li.twitter a { background-image: url('../img/twitter.png'); }
Becky Hirsch
Becky Hirsch
14,069 Points

That worked! I see now that it was the comma I added in .contact-info, li.twitter a {}. I did your suggestion and it worked and then removed the comma and tried .contact-info li.twitter a {} and it worked as well. Thanks so much!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Nice find Mike, I never noticed the comma.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Rebekah,

Try this,

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

Hope this helps.