Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Contact icons not appearing.

Here is my markup:

   <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
   </ul>

And here is my CSS:

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

Yet no icon is appearing. What am I missing?

Greg Kaleka
Greg Kaleka
39,018 Points

Hi Zach - I cleaned up your code a bit. For future reference, you can surround your code with back-tics like this to get it to look beter:

Here's my HTML:

```HTML

[html code here]

```

And here's my CSS:

```CSS

[css code here]

```

Ok, cool. Thanks a lot!

1 Answer

Mick Reilly
Mick Reilly
10,752 Points

Hi, Zach

The url value of the background-image property is invalid:

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

As img is a directory, it requires a forward slash (/) after it instead of a period (.).

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

Hope this helps.

Mick

Bah! So simple. Thanks for the fresh pair of eyes Mick!