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

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

Ken Yew Cheok
Ken Yew Cheok
741 Points

Cannot 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
Jonathan Broderick
12,409 Points

Hello,

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!

melisa pettaway
melisa pettaway
9,556 Points

if 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.

Hi 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
Jonathan Broderick
12,409 Points

Hi 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.

Hi 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
Ken Yew Cheok
741 Points

Hi 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
Ken Yew Cheok
741 Points

Hi 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.

http://imgur.com/2PssOE9