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 trialMohammed Alhaidery
14,384 PointsProblem 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
14,384 PointsThank 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
5,773 PointsDid you link to the email image: .contact-info li.mail a { background-image: url('../img/mail.png'); }
Mohammed Alhaidery
14,384 PointsYes 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
5,773 PointsThe 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
14,384 PointsI checked that and the email was correct, I also changed the email and the problem is still there! it's so frustrating
Diane Houghton
5,773 PointsAnd 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
14,384 PointsI 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
5,773 PointsI 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
14,384 PointsI just did it and nothing changed!
Ory Baum
1,281 PointsI am having the same problem. Did anyone find a solution to this?
Ory Baum
1,281 PointsI 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
14,384 PointsThank you for your answer, but it seems that my section is properly formatted
Daniel Cardenas
Courses Plus Student 9,236 PointsSame issue here.