My phone, email, & twitter (of contact) iconography does not show up in any browser.

Question

Sir , I am having problem in adding the background-image property on my contact page.Although i have done the coding as u did. but its not working. Could you please review it & revert.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Shuja | 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"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Shuja Mahmood</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 id="primary"> <h3>General Information</h3> <p>I am not currently looking for a 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 inquries. Otherwise Twitter and emails are the best way to reach me..</p>

    </section>
     <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone"><a href="tel:+91 971 867 3376">+91-971 867 3376</a></li>
            <li class="mail"><a href="mailto:shuja.cs09@gmail.com">shuja.cs09@gmail.com</a></li>
            <li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=shuja_cs09">@shuja_cs09</a></li>
        </ul>

    </section>
    <footer>
      <a href="https://www.facebook.com/shuja.cs09"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon" /></a>
      <a href="https://www.twitter.com/shuja_cs09"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon" /></a>
     <p>&copy; 2015 Shuja Mahmood | Web Designer</p>
    </footer>
</div>

</body> </html>

/*********************************** General ***********************************/ body{ font-family:'open sans' sans-serif; margin:0; padding:0; }

wrapper {

max-width:940px; padding:0 5%; margin:0 auto;

}

a { text-decoration:none; color:#6ab47b; }

img { max-width:100%; }

h3 { margin: 0 0 1em 0; }

header { float:left; margin:0 0 30px; padding:5px 0 0 0; width:100%; }

/*********************************** Heading ***********************************/

logo {

text-align:center; margin:0; padding: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; font-weight:normal; margin:-5px 0 0;

}

/*********************************** Navigation ***********************************/ nav { text-align:center; padding:10px 0; margin:20px 0 0;

}

nav ul { list-style:none; margin:10px 0; padding:0; }

nav li { display:inline-block; } nav a { font-weight:800; padding: 15px 10px;

}

/*********************************** Footer ***********************************/ footer { font-size:0.75em; padding-top:50px; text-align:center; clear:both; color:#ccc; }

.social-icon { width:20px; height:20px; margin:0 5px; }

header { background:#6ab47b; }

/*********************************** Color ***********************************/

h1, h2 { color:#fff; }

nav { background:#599a68; }

nav a, a:visited { color:#fff; }

nav a.selected, a:hover{ color:#32673f; }

body { background:#fff; color:#999; } /*********************************** Page:Portfolio ***********************************/

gallery {

margin:0; padding:0; list-style:none;

}

gallery li {

float:left; margin:2.5%; width:45%; background-color:#f5f5f5; color:#bdc3c7; }

gallery li a p {

margin:0; padding:5%; font-size:0.75em; color:#bdc3c7; } /*********************************** Page: About ***********************************/

.profile-pic img { width:200px; height:200px; }

.profile-pic { display:block; margin: 0 auto 30px; max-width:150px; 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; padding:0 0 0 30px; }

background-repeat:no-repeat; background-size: 20px 20px; }

.contact-info li.phone a { background-image:ur("../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"); }

.twitter a { color:#6ab47b; }

.twitter a:hover { color:#32673f; }

.twit_link a { color:#6ab47b;

} .twit_link a:hover{ color:skyblue; }

Answer 1 · 2015-05-28T15:25:27Z

May 28, 2015 3:25pm

I think I see your problem. One of your background CSS properties is ur() instead of url(). Also, you have spaces between your code which is treating url and what is in the parenthesis as different things. You have the following code:

.contact-info li.phone a {
   background-image:ur("../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");
}

Instead, try the following and let me know if that works:

.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");
}

Welcome to the Treehouse Community

Looking to learn something new?

Shuja Mahmood