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

Candido Romano
seal-mask
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points
Posted by Candido Romano
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points

The mail icon doesn't show up. Phone and Twitter icon are in the wrong place. Help

This is my first question in here, so please be kind ;)

I lost about 40 minutes on this code, but I can't see the mail icon. I see the phone and twitter icon but they are in the wrong place. What's wrong with my code?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>Candido Romano | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400|Changa+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
     <h1>Candido Romano</h1>
      <h2>Journalis and Storyteller</h2>
      </a>
      <nav>
       <ul>
         <li><a href="index.html">Portfolio</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header> 
    <div id="wrapper">
    <section>
      <h3>General Information</h3>
      <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagement. If you have any questions please don't hesitate to contact me!</p>
      <p>Please use phone contact for urgent inquiries</p>
     </section>
      <section>
        <h3>Contact details</h3>
        <ul class="contact-info">
        <li class="phone"><a href="tel:555-6425">555-6425</a></li>
        <li class:"mail"><a href="mailto:candid.romano@gmail.com">candid.romano@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=CandidoRomano">@CandidoRomano</a></li>
        </ul>
     </section>
  <footer>
    <a href="http://twitter.com/CandidoRomano"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
     <a href="http://facebook.com/Candido83"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; Candido Romano.</p>
    </footer> 
      </div>
  </body>
</html>

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

.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;
}

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

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

.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
Sau Ting K
Sau Ting K
11,091 Points

On first glance over, your code for mail in the HTML has a typo. You put "class:" instead of "class=".

3 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Candido,

The reason your mail icon isn't showing up is likely related to the error in syntax in your HTML.

You have this:

<li class:"mail">

But you need:

<li class="mail">

The difference is that you have a colon ( : ) where you need an equals sign ( = ) between your class attribute and the mail value.

As far as your other icons being in the wrong place; how do you mean?

Erik

Candido Romano
seal-mask
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points
Candido Romano
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points

Thank you guys, now I see the mail icon, but all the icon are still in the wrong place.

Erik: I mean, this three icon should be to the left of the page, with some space between the icons and phone number number, mail and twitter nick. But I don't see this space, the icon are still ON the text, even with the same (maybe :) ) CSS of the video. It's like the padding doesn't work. There's sure a problem with my CSS...but i don't know what is it

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Candido,

You have, 

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

You need a space between li and .mail

.contact-info li .mail a {
background-image: url('../img/mail.png');
}
Candido Romano
seal-mask
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points
Candido Romano
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points

Hi Wayne,

first, thank you for this answer but the space between li and .mail wasn't my problem.

I wrote earlier "It's like the padding doesn't work", actually the typo is in the padding line. As you can see in my code, I wrote

padding; 0 0 0 30;

but the correct is

padding: 0 0 0 30;

A colon instead of a semicolon....now i got it, I see my error after two hours!

Thank you all guys