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

Posted by Shari Staten
Shari Staten
11,540 Points

My icons won't show!!!

I'm currently working the CSS Selector track. My icons are supposed to appear but they are not showing at all. What did I do wrong here? Please be so kind to explain your answer. Here is the code:

a[href^="http:"] {
  color: #52bab3;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 18px 18px; 
  padding-left: 25px;
}

a[href$'='.pdf'] {
  background-image: url('../icn-pdf.svg')
}

a[href$='.jpg'] {
  background-image: url('../icn-picture.svg')
}

a[href$='.zip'] {
  background-image: url('../icn-zip.svg')

}

Thanks.

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

The icons are in an folder named img. So for pdfs the correct code would be:

a[href$=".pdf"] { background-image: url('../img/icn-pdf.svg') ; }

Shari Staten
Shari Staten
11,540 Points

Darn punctuation!!! It works now. Thanks, Kris!

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

You have a quote before the equal sign in this line:

a[href$'='.pdf'] {

Your background-image: lines should also end with a semi colon and the url needs the full path ('../img/icn-pdf.svg')

Shari Staten
Shari Staten
11,540 Points

I edited the code some and it still isn't working. Here is what it looks like now:

```a[href^="http:"] { color: #52bab3; text-decoration: none; background-repeat: no-repeat; background-size: 18px 18px; padding-left: 25px; }

a[href$=".pdf"] { background-image: url('../icn-pdf.svg') }

a[href$=".jpg"] { background-image: url('../icn-picture.svg') }

a[href$=".zip"] { background-image: url('../icn-zip.svg') }

What still needs correcting?