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
Ken Yew Cheok
741 PointsCannot add icons.
Why I can't add any icon? I have a problem, my main.css file is not in the CSS folder. Therefore I can't use this pathway:
.contact-info li.phone a { background-image: url('../img/phone.png'); }
I have tried removing the two dots in front giving:-
.contact-info li.phone a { background-image: url('img/phone.png'); }
Still it cannot work.
6 Answers
Jonathan Broderick
12,409 PointsHello,
If your path is 'img/phone.png', then you're telling the browser to look for phone.png in a folder named "img". However, if your file is on the same plane as your index.html file, then the path you're using won't find the file.
With your phone.png file on the same plane as your index.html file, this is what your code should look like:
.contact-info li.phone a { background-image: url('phone.png'); }
Hope this helps!
Lindsay Sauer
12,029 PointsHi Ken Yew,
Your images (phone.php, etc) are not at the same level as your main.css file; they are located in the img folder.
.contact-info li.phone a { background-image: url('img/phone.png'); }
I'm not sure why the code above is not working if you have images in the img folder. Did you expand the img folder to see if there are any images inside?
While it is not necessary to place your CSS files in a specific location, it's beneficial for organization, so you may want to move your CSS files into the css folder. If you did that, then you would use the path to the image that you have in your first post: url('../img/phone.png'); }
Jonathan Broderick
12,409 PointsHi Ken Yew,
Lindsay is correct and I was not, and I apologize for that. Because phone.png is in your main.css file, those two files need to be on the same plane for that path 'phone.png' to work.
I highly recommend doing what Lindsay suggested: put your phone.png in your "img" folder and your main.css in your "css" folder. Then the path: '../img/phone.png' should work without issue.
Lindsay Sauer
12,029 PointsHi Ken Yew,
The path to the icon will depend on where your main.css file is located. Can you take a screenshot of your file structure and post to imgur.com, or describe where main.css is in relation to your img folder?
Ken Yew Cheok
741 PointsHi Lindsay,
I find it hard to upload the image into imgur.com, anyway my file is not inside the css folder. It is outside of it, on the same plane as the index.html.
Ken Yew Cheok
741 PointsHi Jonathan and Melisa,
I have tried your method but the icons are still not appearing. Anyway I have posted a screenshot of my file structure into imgur.com. Please have a look . Thanks.
melisa pettaway
9,556 Pointsmelisa pettaway
9,556 Pointsif it is in the same pane as index.html. then it should just be phone.png. anything within the same folder as your html doc doesn't need an absolute path.