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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Posted by annika
annika
1,717 Points

Icons not showing up - please help ...

Hi :-) I'm new here and I'm hoping you'll be able to help.

My phone/e-mail/twitter icons won't show up.

Here's the 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;
  line-height: 0.8em
}


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

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

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

nav li {
  display: inline-block;
}

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



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

footer {
  clear: both;
  font-size: 0.75em;
  text-align: center;
  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 {
  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; 
}
.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');
}

/**********************************
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
}

And the HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Annika | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href=index.html id="logo"> <h1>Annika</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 e-mail are the best way to reach me.</p> </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: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>

  </section>

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

</body>

</html>

Umar A
Umar A
4,041 Points

Hi

Are you sure that the icons are in a folder name "img" and this folder is in the same folder with index.html?

You code looks good, but I think there is a problem with the source attribute for the icons

annika
annika
1,717 Points

Hi Umar,

Thanks for your quick response - it's greatly appreciated :-)

Yes, my icons are in a folder named "img". I'm using Firefox while working with Treehouse and I've had other problems with icons before (code was okay but I need "clear: both" for the images to display correctly). In this case though, they don' appear at all ... :-(

Umar A
Umar A
4,041 Points

You're welcome :-)

hmmm, try using another browser like Chrome.

I tried your code with firefox, and the icons displayed correctly (i used my own icons)

annika
annika
1,717 Points

Thanks for checking it in your browser, Umar. At least I now know that the code is correct. Didn't even think of checking it in Chrome. Will do so now and report back :-)

Umar A
Umar A
4,041 Points

:-)

3 Answers

annika
annika
1,717 Points
annika
annika
1,717 Points

Hi again! Checked in Chrome. It didn't work either. I am totally stumped ....

annika
annika
1,717 Points
annika
annika
1,717 Points

Solved it! I wrote, "background-image: url('..img/phone.png');

There was a slash missing before "img". It should say, "background-image: url('../img/phone.png');

Umar A
Umar A
4,041 Points

Great work!

annika
annika
1,717 Points
annika
annika
1,717 Points

Thanks :-)