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 trialannika
1,717 PointsIcons 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>© Annika 2014</p>
</footer>
</div>
</body>
</html>
annika
1,717 PointsHi 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
4,041 PointsYou'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
1,717 PointsThanks 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
4,041 Points:-)
3 Answers
annika
1,717 PointsHi again! Checked in Chrome. It didn't work either. I am totally stumped ....
annika
1,717 PointsSolved 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
4,041 PointsGreat work!
annika
1,717 PointsThanks :-)
Umar A
4,041 PointsUmar A
4,041 PointsHi
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