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
Nicholas Tan
608 Pointsadding iconography problem
the icons for the mail and phone dont show up! i used "contactinfo" instead of "contact-info" as the id so it shouldnt have a problem
this is my code, i used the id "contactinfo" instead of "contact-info"
.contactinfo
{list-style:none;
padding:0;
margin:0;
font-size:0.9em;}
.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#999;} .contactinfo a {display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin:0 0 10px 0;}
.contactinfo li.phone a { background-image: url ('../img/phone.png); }
.contactinfo li.mail a{ background-image: url ('../img/mail.png'); }
.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }
13 Answers
banu babanu
8,152 PointsClose your url path:
.contactinfo li.phone a { background-image: url ('../img/phone.png'); }
banu babanu
8,152 PointsPaste your CSS file please.
Nicholas Tan
608 Points.contactinfo
{list-style:none;
padding:0;
margin:0;
font-size:0.9em;}
.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#146002;}
allcontactinfo {text-align:center}
.contactinfo a {display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin:0 0 10px 0;}
.contactinfo li.phone a { background-image: url ('../img/phone.png'); }
.contactinfo li.mail a{ background-image: url ('../img/mail.png'); }
.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }
banu babanu
8,152 PointsIn your HTML file contactinfo is an ID or a class?
Nicholas Tan
608 Pointsits a class
banu babanu
8,152 PointsIf in your HTML file contact info is an ID you must use #contactinfo instead of .contactinfo
banu babanu
8,152 Pointsok,paste the html file
Nicholas Tan
608 Pointsi cant paste the html it just shows my contact info and none of the syntax
Nicholas Tan
608 Points<h3>Contact Details</h3>
<ul class="contactinfo">
<li class="phone"><a href="tel:982086576">982086576</a></li>
<li class="mail"><a href="mailto:nicholas.taney@hotmail.com">nicholas.taney@hotmail.com</a></li>
<li class="facebook"><a href="https://www.facebook.com/nicholas.tan.526438">https://www.facebook.com/nicholas.tan.526438</a></li>
</ul>
banu babanu
8,152 PointsIn your main,css you mast have this: (line 152)
.contactinfo {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contactinfo a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
Nicholas Tan
608 Pointsi have all those lines it still wont show up T-T
banu babanu
8,152 PointsYour contact.html must be like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</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>Nick Pettit</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 email are the best way to reach me.</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contactinfo">
<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>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
Nicholas Tan
608 Points/*********** CONTACT *********/ this is my css .contactinfo
{list-style:none;
padding:0;
margin:0;
font-size:0.9em;}
.contactinfo a, .contactinfo a:hover {color:#030d8b;} .contactinfo a {color:#146002;}
allcontactinfo {text-align:center}
.contactinfo a {display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin:0 0 10px;}
.contactinfo li.phone a { background-image: url ('../img/phone.png'); }
.contactinfo li.mail a{ background-image: url ('../img/mail.png'); }
.contactinfo li.facebook a{ background-image: url ('../img/facebook.png'); }
/*********** CONTACT *********/
banu babanu
8,152 PointsAnd your main.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;
}
/**********************************
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: #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: 100%;
}
/**********************************
PAGE: CONTACT
***********************************/
.contactinfo {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contactinfo a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contactinfo li.phone a {
background-image: url('../img/phone.png');
}
.contactinfo li.mail a {
background-image: url('../img/mail.png');
}
.contactinfo 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;
}
Nicholas Tan
608 Points<!DOCTYPE html> <html>
<head>
<!------------------ GENERAL -------------------->
<meta charset="uft-8">
<title>Test Website</title>
this is my html
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Sail|Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!------------------ GENERAL -------------------->
</head>
<body>
<header>
<!----------- HEADLINES ------------->
<div id="topheader">
<a href= index.html id="logo">
<h1>Test Website!</h1></a>
</div>
<div id="bottomheader">
<a href= index.html id="logo2">
<h2>test website !</h2></a>
</div>
<!----------- HEADLINES ------------->
<!-------------------- NAVIGATION ------------------>
<nav>
<ul>
<li><a href="/index.html">Images</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
<!-------------------- NAVIGATION ------------------>
</header>
<div id="allcontactinfo">
<section>
<!---------- PARAGRAPH TEXT ---------->
<h3>General Information</h3>
<p>This is a test website and the information below is for testing purposes only</p>
<p>This is a test website and the information below is for testing purposes only</p>
<!---------- PARAGRAPH TEXT ---------->
</section>
<section>
<!------------- CONTACT DETAILS ------------>
<h3>Contact Details</h3>
<ul class="contactinfo">
<li class="phone"><a href="tel:982086576">982086576</a></li>
<li class="mail"><a href="mailto:nicholas.taney@hotmail.com">nicholas.taney@hotmail.com</a></li>
<li class="facebook"><a href="https://www.facebook.com/nicholas.tan.526438">https://www.facebook.com/nicholas.tan.526438</a></li>
</ul>
<!------------- CONTACT DETAILS ------------>
</section>
</div>
</body>
<footer>
<!---------- FOOTER ---------->
<a href="https://www.facebook.com/nicholas.tan.526438"><img src=img/facebook-wrap.png alt="facebook logo"class="fblogo">
</a>
<p>© Nicholas </p>
<!---------- FOOTER ---------->
</footer>
</html>,,,
banu babanu
8,152 Pointsthis is your contact.html ?
banu babanu
8,152 PointsDownload the Project files and compare with yours. Can you see the footer icons? (facebook/twitter)
Nicholas Tan
608 Pointsyes i can see the footer icons. but for some reason the icons for the contact page is not showing up
banu babanu
8,152 PointsCan you email me the project? websiterd@gmail.com
Nicholas Tan
608 Pointsive emailed it to u :D
banu babanu
8,152 PointsHello, You have a space between url and().
Try this:
.contactinfo li.phone a {
background-image: url('../img/phone.png');
}
Nicholas Tan
608 Pointshi i tried copy and pasting ur code but it still doesnt show any icons
banu babanu
8,152 PointsOk, I send you the project corrected
Nicholas Tan
608 Pointsthanks so muchhh
Nicholas Tan
608 PointsNicholas Tan
608 Pointshi i closed it but it still didnt work, the icons still dont show up