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 How to Make a Website Adding Pages to a Website Add Iconography

Posted by Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

Problem with adding iconography

Hello there,

I hope you all have been fine.

Here is my problem:

I tried to add the email icon on the contact page but I could not. I replayed the video more than once to see if I can see anything missing but unfortunately I did not meet any mistakes (I think).

I will be happy if anyone would help me with my problem.

Here is what I wrote:

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;

Thank you in advance.

9 Answers

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points
Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

Thank you all for trying to help me. I rewrote all the codes related to this matter and it worked! Sorry to bother all.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Did you link to the email image: .contact-info li.mail a { background-image: url('../img/mail.png'); }

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points
Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

Yes I did here is how I linked it:

.contact-info li.mail a { background-image: url('../img/mail.png'); }

The strange thing is the phone and twitter icons appeared but the the mail icon did not appear. Moreover, I changed the icon's extension to jpg but it did not work.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

The only other suggestion I can make is to be sure that the list item is correct in your contact.html file: <li class="mail"><a href="mailto:youremail@gmail.com">youremail@gmail.com</a></li>

One little typo can screw the whole thing up!

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

I checked that and the email was correct, I also changed the email and the problem is still there! it's so frustrating

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

And the mail.png file is actually in the img folder? You mentioned that you changed the extension to .jpg. Your css code won't find it if it is still .jpg - it's looking for a .png file.

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

I changed the email icon extension which is in (img) folder and I changed my css code to look for the new jpg file but it did not work. Therefore, I had to change what I did to default.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

I would upload that mail.png file again into the img folder. Then change the css to look for the .png file. the file may have become corrupted when you changed the extension.

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

I just did it and nothing changed!

Ory Baum
Ory Baum
1,281 Points
Ory Baum
Ory Baum
1,281 Points

I am having the same problem. Did anyone find a solution to this?

Ory Baum
Ory Baum
1,281 Points
Ory Baum
Ory Baum
1,281 Points

I think I found the solution...

Go to your section within contact.html

Make sure that your 'link classes' within your 'unordered' list are spelled correctly with all the proper formatting.

For example, my mistake was, I forgot to include the equal sign, when properly formatting classes in my list.

Hopefully this helps or helps set you in the right direction.

Mohammed Alhaidery
Mohammed Alhaidery
14,384 Points

Thank you for your answer, but it seems that my section is properly formatted