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

Nicholas Tan
Nicholas Tan
608 Points

adding iconography problem

the icons for the mail and phone dont show up! i used "contactinfo" instead of "contact-info" as the id so it shouldnt have a problem

this is my code, i used the id "contactinfo" instead of "contact-info"

.contactinfo

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

.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#999;} .contactinfo a {display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin:0 0 10px 0;}

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

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

.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }

13 Answers

Close your url path:

.contactinfo li.phone a { background-image: url ('../img/phone.png'); }
Nicholas Tan
Nicholas Tan
608 Points

hi i closed it but it still didnt work, the icons still dont show up

Paste your CSS file please.

Nicholas Tan
Nicholas Tan
608 Points

.contactinfo

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

.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#146002;}

allcontactinfo {text-align:center}

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

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

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

.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }

In your HTML file contactinfo is an ID or a class?

If in your HTML file contact info is an ID you must use #contactinfo instead of .contactinfo

ok,paste the html file

Nicholas Tan
Nicholas Tan
608 Points

i cant paste the html it just shows my contact info and none of the syntax

Nicholas Tan
Nicholas Tan
608 Points

<h3>Contact Details</h3> <ul class="contactinfo"> <li class="phone"><a href="tel:982086576">982086576</a></li> <li class="mail"><a href="mailto:nicholas.taney@hotmail.com">nicholas.taney@hotmail.com</a></li> <li class="facebook"><a href="https://www.facebook.com/nicholas.tan.526438">https://www.facebook.com/nicholas.tan.526438</a></li> </ul>

In your main,css you mast have this: (line 152)

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

.contactinfo a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
Nicholas Tan
Nicholas Tan
608 Points

i have all those lines it still wont show up T-T

Your contact.html must be like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</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 engagements. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contactinfo">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
Nicholas Tan
Nicholas Tan
608 Points

/*********** CONTACT *********/ this is my css .contactinfo

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

.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#146002;}

allcontactinfo {text-align:center}

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

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

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

.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }

/*********** CONTACT *********/

And your main.css:

/**********************************
GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/**********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/**********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}



/**********************************
PAGE: ABOUT
***********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/**********************************
PAGE: CONTACT
***********************************/

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

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

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

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

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



/**********************************
COLORS
***********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Nicholas Tan
Nicholas Tan
608 Points

<!DOCTYPE html> <html>

<head>

<!------------------ GENERAL -------------------->  
<meta charset="uft-8">
<title>Test Website</title>
this is my html  
  <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Sail|Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <!------------------ GENERAL -------------------->   



    </head>



    <body>


         <header>



             <!----------- HEADLINES ------------->

        <div id="topheader">
        <a href= index.html id="logo"> 
     <h1>Test Website!</h1></a>
         </div>
         <div id="bottomheader">
         <a href= index.html id="logo2">
     <h2>test website !</h2></a>
          </div>
         <!----------- HEADLINES ------------->   


        <!-------------------- NAVIGATION ------------------>    
        <nav>
        <ul>
           <li><a href="/index.html">Images</a></li> 
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
            </ul>
            </nav>
        <!-------------------- NAVIGATION ------------------>    



        </header>




     <div id="allcontactinfo">     
    <section>



        <!---------- PARAGRAPH TEXT ---------->   
        <h3>General Information</h3>
        <p>This is a test website and the information below is for testing purposes only</p>
        <p>This is a test website and the information below is for testing purposes only</p>
      <!---------- PARAGRAPH TEXT ---------->    



        </section> 





        <section>

  <!------------- CONTACT DETAILS ------------>   
     <h3>Contact Details</h3>

  <ul class="contactinfo">

<li class="phone"><a href="tel:982086576">982086576</a></li>

<li class="mail"><a href="mailto:nicholas.taney@hotmail.com">nicholas.taney@hotmail.com</a></li> 

 <li class="facebook"><a href="https://www.facebook.com/nicholas.tan.526438">https://www.facebook.com/nicholas.tan.526438</a></li>
     </ul>          
  <!------------- CONTACT DETAILS ------------>   




        </section>
      </div> 


        </body>




    <footer>

     <!---------- FOOTER ---------->

    <a href="https://www.facebook.com/nicholas.tan.526438"><img src=img/facebook-wrap.png alt="facebook logo"class="fblogo">
    </a>
    <p>&copy; Nicholas </p>

     <!---------- FOOTER ---------->


    </footer>







</html>,,,

this is your contact.html ?

Download the Project files and compare with yours. Can you see the footer icons? (facebook/twitter)

Nicholas Tan
Nicholas Tan
608 Points

yes i can see the footer icons. but for some reason the icons for the contact page is not showing up

Can you email me the project? websiterd@gmail.com

Nicholas Tan
Nicholas Tan
608 Points

ive emailed it to u :D

Hello, You have a space between url and().

Try this:

.contactinfo li.phone a {
    background-image: url('../img/phone.png');
}
Nicholas Tan
Nicholas Tan
608 Points

hi i tried copy and pasting ur code but it still doesnt show any icons

Ok, I send you the project corrected