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 Pointscant add any iconography for the contact page
i cant make any of the phone.png and mail.png icons show up. please help, my code is correct
5 Answers
banu babanu
8,152 PointsNo space between url and ()
background-image: url('../img/mail.png');
Nicholas Tan
608 Pointshey banu thanks for replying again. i tried that but the icons still dont show up
banu babanu
8,152 PointsPost the new css file
Nicholas Tan
608 Points {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 PointsCan you post the complete css file?
banu babanu
8,152 PointsLast night I sent you the modified project .You can have a look and compare with your code.
Nicholas Tan
608 Points```css/************ GENERAL ***************/ body {font-family:'sail', sans-serif} body {background-color:#fff; color:#999;} a {text-decoration:none;}
h3 {margin:0 0 1em 0; } /************ GENERAL ***************/
/****************** HEADER STYLES **************/
h1 {font-family:'nothing you could do',sans-serif; margin: 15px 0; font-size: 3.0em; font-weight:normal; line-height:0.8; text-align:center}
h2 {font-family:'nothing you could do',sail; margin: -5px 0 0; font-size: 1.50em; font-weight:normal;}
header {background-color:#05075c; border-color:#146002;}
header {float:left; margin:0 0 30px 0; padding:5px 0 0 0; width:100%;}
h1,h2 {color: #fff;}
logo {text-align:center;
margin: 0;}
logo2 {text-align:center;
margin: 0;}
/****************** HEADER STYLES **************/
/********** NAV STYLES **********/
nav { text-align:center;
padding:10px;
margin:20px 0 0;}
nav ul{list-style:none; padding:10px; margin:20px;}
nav li {display: inline-block;}
nav a {font-weight:400; padding:15px 10px;}
nav {background-color:#146002;} nav a,nav a:visited {color:#fff;} nav a:hover {color:#030d8b;} nav a {font-size:1.75em} nav a.selected {color:#042f7e;} /********** NAV STYLES **********/
/********** PICTURES STYLES **********/ img {max-width:100%;}
absolute {
max-width:940px;
margin:0 auto;
padding:0 5%}
absolute {border-color:#030d8b;}
gallery {margin: 0;
padding:0 0 0 15%;
list-style:none;}
gallery li {float:left;
width:35%;
margin:2.5%;
background-color:#f5f5f5;
color:#bdc3c7;}
gallery li a p {margin:0;
padding:5%;
font-size:1.65em
color:#146002;}
/********** PICTURES STYLES **********/
/*********** ABOUT PAGE *********/ .aboutpic
{max-width:150px;
margin: 0 auto 30px;
border-radius:20px;
display:block;}
ptext
{text-align:center;
padding:0 0 0 20px;
font-size:20px}
/*********** ABOUT PAGE *********/
/*********** CONTACT *********/ .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'); }
/*********** CONTACT *********/
/************* FOOTER STYLES ********/ footer {text-align:center; clear:both; font-size:0.75; padding-top:50px; color:#ccc;}
.fblogo {width:35px; height:35px; margin:0} /************* FOOTER STYLES ********/```
banu babanu
8,152 PointsCompare my project with yours.
Nicholas Tan
608 Pointsoh ok i see, the text alignment was the problem. is there any way i can align it to the center with the icons on the left?
Nicholas Tan
608 PointsNicholas Tan
608 Points