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

Posted by Nicholas Tan
Nicholas Tan
608 Points

cant 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

Nicholas Tan
Nicholas Tan
608 Points
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 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');
}

5 Answers

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

No space between url and ()

background-image: url('../img/mail.png');

Nicholas Tan
Nicholas Tan
608 Points

hey banu thanks for replying again. i tried that but the icons still dont show up

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

Post the new css file

Nicholas Tan
Nicholas Tan
608 Points
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 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
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

Can you post the complete css file?

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

Last night I sent you the modified project .You can have a look and compare with your code.

Nicholas Tan
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
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

Compare my project with yours.

Nicholas Tan
Nicholas Tan
608 Points

oh 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?