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
Mykel Pyles
2,513 PointsContact Icon's not showing up?
Hey there, I am trying to add the icons for my Phone and email. Everything seems fine so far but the Icons do not show up. I have no idea why?
My contact.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mykel Pyles</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>Mykel Pyles</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. If you have any questions, please do not hesitate to contact me.</p> <p>Please only use phone contact for urgent inquires. Otherwise e-mail is the best way to contact me.</p> </section> <h3>Contact Details</h3> <ul class= "contact-info"> <li class="phone"><a href="tel:555-555-5555">(555)555-5555</a></li> <li class="mail"><a href="mailto:Mykelpyles@example.com"> Mykelpyles@example.com</a></li> </ul> <section> </section> <footer> <a href="https://twitter.com/super_pyles"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <p>© 2016 Mykel Pyles.</p> </footer> </div> </body> </html>
My main.css:
/***************** General ******************/
body { font-family: 'Open Sans' , sans-serif; }
a { text-decoration: none; }
wrapper {
max-width: 940px; margin:0 auto; padding:0 5%; }
img{ max-width: 100%; }
/***************** 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: o 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: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'); }
/***************** Colors ******************/
/* 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 Links */ nav a, nav a:visited { color:#fff; }
/* selected nav link */ nav a.selected, nav a:hover { color:#32673f; }
/* site body */ body { background-color:#fff; color:#999; }
Does anyone know why the icon's are not showing up?
5 Answers
Simon Duchaine
14,441 PointsI actually found your problem. At lines 61 and 65 (.contact-info li.phone a and .contact-info li.mail a), there's a space between URL and the apostrophy.
When you declare the background-image: url(' ..'), the apostrophy need to be always stick to "URL".
Simon Duchaine
14,441 PointsI think that your browser don't know where to look for your images. You forgot the backslash and 2 dots at the beginning of your src (../img/) or just a backslash if your folder img is in your css folder.
Why not try this:
html
<img src="../img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
Mykel Pyles
2,513 PointsWell that is not the issue. That is showing up perfectly. What is not showing up is the phone and email Icon for: <ul class= "contact-info"> <li class="phone"><a href="tel:540-435-2716">(540)435-2716</a></li> <li class="mail"><a href="mailto:Mykelpyles@gmail.com"> Mykelpyles@gmail.com</a></li>
Mykel Pyles
2,513 PointsSimon, you are my hero. That worked. Thank you so much.
Mykel Pyles
2,513 PointsSimon, you are my hero. That worked. Thank you so much.
Simon Duchaine
14,441 PointsYou're welcome! :)