Why peg the icon css to the anchor element as opposed to the list element?

Question

Why wouldn't the following css serve as well as that which Nick uses in the video? Perhaps it has to do with adding responsiveness in the desktop layout....?

.contact-info li {
  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 {
  background-image: url('../img/phone.png') ;
}

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

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

Here's the relevant html:

<ul class="contact-info">
  <li class="phone"><a href="tel:1234567">1234567</a></li>
  <li class="mail"><a href="mailto:me@example.com">me@example.com</a></li>
  <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=example">example</a></li>
</ul>

And here's Nick's css from the video:

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

Answer 1 · 2016-05-09T14:21:14Z

May 9, 2016 2:21pm

I think he does it because that way you can use the icons as a clickable link also.

If you don’t do it like that the icons are still there but you can’t click on them.

Welcome to the Treehouse Community

Looking to learn something new?

Peter Crawford

Peter Crawford

Why peg the icon css to the anchor element as opposed to the list element?

1 Answer

Joey Bruijns

Joey Bruijns

Peter Crawford

Peter Crawford