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

Posted by roselio marcial
roselio marcial
3,927 Points

icon not showing??

none of the icon show i dont know what is wrong cheked thecode 3 times

3 Answers

M. Cotter
M. Cotter
6,179 Points
M. Cotter
M. Cotter
6,179 Points

Hi Roselio,

I believe that your problem may be that the word "contact" is mis-spelled in your CSS. For example:

.contac-info

instead of

.contact-info

This is a common mistake, one that I've made myself many times.

If that fixes your problem, please remember to mark my response as the Best Answer! :) But if not, please copy your full HTML code so that I can see what the issue may be.

Thanks!

M.

roselio marcial
roselio marcial
3,927 Points

thx man is funny how something so simple is the problem is always easier to see other peoples mistakes rather that our own

M. Cotter
M. Cotter
6,179 Points
M. Cotter
M. Cotter
6,179 Points

My pleasure! I'm glad that fix was the solution for you! I've found myself running into the same issue many times before - funny how such a minor mistake can throw things so out of whack! ;) Glad I could help!

roselio marcial
roselio marcial
3,927 Points
roselio marcial
roselio marcial
3,927 Points

.contact-info{ list-style:none; padding:0; margin:0; font-size:0.9em; }

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

}

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

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

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

roselio marcial
roselio marcial
3,927 Points
roselio marcial
roselio marcial
3,927 Points

<section> <h3>General Information</h3> <p> I am currently looking for entry level job or freelance work.If u have any questions, please dont hesitated to contacted me.</p>

<p>Please onky use phone contact for urgen inquiries. Otherwise, Twitter  and email are the best way to reach me.</p>

</section>

<section> <h3>Contact Details</h3> <ul class="contact-info">

  <li class="phone"><a href="tel:240-595-0235">240-595-0235</a></li>

<li class="mail"><a href="mailto:bayoneta03@gmail.com">bayoneta03@gmail.com</a></li>

<li class="twitter"><a href="https://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>

</ul>

</section>