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

Jacob Cordeiro
Jacob Cordeiro
934 Points
Posted by Jacob Cordeiro
Jacob Cordeiro
934 Points

icons not showing up.

hey guys. The icons for the phone and the mail are not showing up and I don't know whats wrong. Please help.

Heres my 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;
}
p{
margin: 0 2.5px 0 2.5px;
}


/**********************
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
    margin 20px 0 0;
}
nav ul{
text-align:center;
 padding: 10px 0;
   margin: 20px 0 0;  
}
nav li{
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;
 padding-top: 50px  
 color: #ccc 
}


/**********************
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: 100px;}
/**********************
PAGE:PORTFOLIO
**********************/

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


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


/* blue headder */
header{

background: #00f;
border-color:#00f;  
}
/*nav backround for mobile */
nav  {
 background: #0000ff;
}
/*logo text */
h1, h2 {
color: #fff
}
/*links*/
a{
color: #0000ff;
}
/*nav backround for mobile */
nav  {
 background: #0000ff;
}

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


/*selected nav link */
nav a.selected, nav a:hover {
color: #000}

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

and heres my html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jacob Cordeiro| Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jacob Cordeiro</h1>
        <h2>Designer</h2>
        </a>
      <nav>
      <ul>
        <li><a href="index.htlm" >Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.htlm" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wraper">
      <section>
        <h3>General Information</h3>
        <p>I  am not currently looking for a job because I am do not have the skill yet, but I will post my contact info and change this paragraph when I am ready!</p>
        <p>I just have these icons up so when Im ready I can put my info up :-) </p>
      </section>
      <section>
      <h3> Contact Info</h3>
     <ul class="contact-info">
        <li class="phone"><a href="tel:000-000"></a>000-000</li>
        <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
      </ul>
      </section>
      <footer>
    <p>&copy; 2014 Jacob Cordeiro.</p>
    </footer>
     </div>
    </body>
</html>

Thanks :-)

7 Answers

Brody Ricketts
Brody Ricketts
15,612 Points
Brody Ricketts
Brody Ricketts
15,612 Points

Thanks to Callum for pointing out the biggest issue, having the class tag formatted with the correct syntax.

While I was at it, i edited your number display on the HTML so that the png img and the mock phone number lined up side by side. Used this code:

<li class="phone"><a href="tel:000-0000">000-0000</a></li>

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

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

Just a quick reference, your code has the 000-0000 on the line under the phone.png, and that is because its after the closing a tag.

Edit: Another suggestion that I can give you starting out, download the project files and compare, line by line if you have to. Then go and make your alterations when you feel more comfortable with web dev and design.

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

Thank you but I figured it out already and that post was the problem

Callum Lock
Callum Lock
7,290 Points
Callum Lock
Callum Lock
7,290 Points

Change (in ur css):

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

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

to:

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

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

David Tonge
PLUS
David Tonge
Courses Plus Student 45,640 Points
David Tonge
David Tonge
Courses Plus Student 45,640 Points

Do you have your CSS and images in separate folders called "CSS" and "IMG'?

David Tonge
PLUS
David Tonge
Courses Plus Student 45,640 Points
David Tonge
David Tonge
Courses Plus Student 45,640 Points

Hey Jacob,

I don't get it. So did you find what was wrong with your code? I noticed your answer is marked as "best answer" but that isn't really an answer. The Best Answer feature is set up in a way that helps other students on the forum who may have had the same problem as you.

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

I did not know what that did. thanks. and no i did not find out what happened.

Peter Cusack
Peter Cusack
2,622 Points
Peter Cusack
Peter Cusack
2,622 Points

I think what was wrong with your code is that you forgot to add a period before calling the ".contact-info" class.