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
E F
1,968 PointsAdd Iconography: Social Icons on Contact Page Don't Appear
Under "How to make a Website" I am currently building the Contact page and have run into a rather strange problem. I cannot add the icon png's. I have the following code in main.css:
/**********************************
PAGE CONTACT
***********************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0:
font-size: 0.3em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 0 20px;
}
.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');
}
=============================
My first thought was that the folder placement is wrong or that the file names were wrong, but this is not the case. What am I missing? Thanks in advance! :)
7 Answers
Ken Ortman
3,947 PointsThe links to your images are missing the slash after the ".."
for example, you need '../img/twitter.png' instead of '..img/twitter.png'
Shawn Denham
Python Development Techdegree Student 17,802 PointsIf you are doing this in workspaces you do not need the "..." It should look like below. You also need the "." on your other 2 contact-info class calls
.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'); }
Hope this helps!
-Shawn
Ken Ortman
3,947 Pointshave some coffee - both of you!
E F
1,968 PointsThank you both, Ken and Shawn. I've made the changes guys. This is what I have now and "mail.png" is not showing up. (And how are you posting your code color-coded like that?)
/**********************************
PAGE CONTACT
***********************************/
.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 0 20px;
}
.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');
}
E F
1,968 PointsWhen I take out the "URL" then the phone and twitter icons disappear again.
Shawn Denham
Python Development Techdegree Student 17,802 PointsYou have to have url in there :)
Shawn Denham
Python Development Techdegree Student 17,802 Pointsyou do not need the ../ before img. Just for giggle post the exact code I have below and let me know what happens :)
.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 0 20px; }
.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'); }
To post your code to the forums wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.
Example:
```css
#body { color: black; }
```
-Shawn
E F
1,968 PointsThanks for showing me the posting trick. As for the main problem, now the two icons that were there disappeared with your code.
Shawn Denham
Python Development Techdegree Student 17,802 PointsAre you using a workspace? If you can you send me a link to it please
This is 100% folder path issue :)
so this works for phone.png and twitter.png?
.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'); }
Ken Ortman
3,947 Pointsthe ../ is necessary because the css stylesheets are in their own separate folder in this project. If the CSS files were in the same folder as the HTML files, what he told you about not needing the dots would be correct.
Shawn Denham
Python Development Techdegree Student 17,802 PointsI need another cup of coffee...you absolutely 1000% correct Ken Ortman. For whatever reason my brain was working from the index.html file..
HA!
-Shawn
E F
1,968 PointsOK, I figured it out. In the contact.html file, I listed the id class as "email" while the main.css file referenced "mail." I changed these to match each other and now all three icons show up. I need to stop trying to code when I'm exhausted.
Thank you all very much for such quick help.
Shawn Denham
Python Development Techdegree Student 17,802 PointsMake sure you mark Ken's as the right answer! :)
Michael Afanasiev
Courses Plus Student 15,597 PointsMichael Afanasiev
Courses Plus Student 15,597 PointsFixed the code for you. :)