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
Siddharth Kothari
7,114 PointsIcons not appearing
Hi! I'm following along with a text editor (Brackets) because I had trouble getting Workspaces to save with each new lesson. I haven't had a single problem until this point but now I can't seem to get the Twitter, mail, and phone icons to appear in the browser. I did not include "../" to the front of the url address because the folder "img" is in the same folder as my working html and css files for this project.
Code looks like this:
/******************************** PAGE: CONTACT *********************************/
.contactinfo { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contactinfo a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; }
.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'); }
4 Answers
Jacob Miller
12,466 PointsYou need to include the ../ because you are inside the styling these from the css file which is inside the css folder. So you need to go up one directory, then into the img folder to find your icons.
Jacob Miller
12,466 PointsUnless I read that wrong and your html and css files are in the same folder. Is that the case?
Siddharth Kothari
7,114 PointsThat is the case. I had removed the img folder from the original css folder because I assumed that including pictures would be easier if they were all together in the same folder. The total address currently looks like nickpettit/img/phone.png or nickpettit/index1.html for the html portion. I've tried altering the syntax of the code, sub-ing "" for '' and adding the ../ extension to the front and nothing makes the icons appear on the browser. Do you think it could be it's placement within the CSS? As in, it should come before or after certain sections? Cheers
Jacob Miller
12,466 PointsI'm not sure then. Your code looks fine (besides the missing dashes in the first two class selectors), so the only thing I think it could be is the path to the images. The placement within the css file doesn't matter, so that isn't the problem. Hope you figure it out.
Jacob Miller
12,466 PointsDid you make sure the list items in your html file have the right classes?
Siddharth Kothari
7,114 PointsSiddharth Kothari
7,114 PointsTypes on the first two classes: they should also read .contact-info with the hyphen... they are all the same in my actual code.