Web Design - Stage 7 - adding iconography

Question

Hello, I'm currently working through the Web Design and I'm on stage 7 trying to add social media iconography to the contact page.

The icons aren't showing up and I would be grateful if anyone can stop what I've done wrong.

This is my HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>So Hum | Creative Agency</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>So Hum</h1> <h2> Creative Agency</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>Please get in touch if you want to work with us. </p>

  <p>We would love to hear from you.</p>
  </section>
  <h3>Contact Details</h3>
  <ul class="contact-info"></ul>
  <li class="phone"><a href="tel: 07784050132">07784050132</a></li>
  <li class="mail"><a href="mailto: agency@so-hum.com">agency@so-hum.com</a></li>
  <li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=beckpearson">@beckpearson</a></li>
  <section>

  </section>
 <footer>
   <a href="http://twitter.com/beckpearson"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
   <a href="http://facebook.com/beckylorenpearson"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
  <p>&copy; 2014 So Hum.</p>
  </footer>
    </div>

</body> </html>

This is my CSS

GENERAL
*************/
body {
font-family:'Lato', 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: 'Lato', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-family: 'Lato', sans-serif;
  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: #cccccc;
    color: #cccccc;
}

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


/************
Page: ABOUT
************/

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

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

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

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

/* pink header */
header {
  background: #ccccff;
    border-color: #ccccff;
}

/* logo text */

h1, h2, {
  color: #fff;
}

  /* nav background */
nav {
  background: #ccccff;
}



/* links */

a {
  color: #ffcccc;
}


nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #ffcccc;
}```

Thank you!

Answer 1 · 2014-12-11T15:58:09Z

December 11, 2014 3:58pm

Thank you for your reply, unfortunately that didn't work

Answer 2 · 2014-12-11T18:00:08Z

December 11, 2014 6:00pm

Hi Becky,

Could you let me know if you are seeing the broken link icon.. (file with crack through) ?

HTML can me a little unpredictable at best the problem could lie with the file location on your pc relative to the file path you have specified..

or

The could be an error further up in your code usually a unclosed element etc. but ill skim through for that you check the file path ...

Craig

Answer 3 · 2014-12-11T18:19:49Z

December 11, 2014 6:19pm

Hi Becky,

There is a problem here:

html


  <h3>Contact Details</h3>

  <ul class="contact-info"></ul>

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

  <li class="mail"><a href="mailto: agency@so-hum.com">agency@so-hum.com</a></li>

  <li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=beckpearson">@beckpearson</a></li>

the <ul> closing tag should be below your list items as follows :

html

<h3>Hello</h3>
<ul class="contact-info">
<li><a href="#" >List Item 1</a></li>
<li><a href="#" >List Item 2</a></li>
</ul>

other than that the markup looks ok to me,

add a / to the beginning of the href for your icons eg. "/img/twitter-wrap.png"

Hope this is helpful in some way !

Craig

Welcome to the Treehouse Community

Looking to learn something new?

Becky Pearson

Becky Pearson

Web Design - Stage 7 - adding iconography

Lucian Melinte

Lucian Melinte

3 Answers

Becky Pearson

Becky Pearson

Craig Watson

Craig Watson

Craig Watson

Craig Watson