Im trying to add iconography next to my contact info but it doesnt work. Can anyone help me, please? Thanks

Question

When I run it, there is no iconography next to my infor

/* Global Layout Set-up */

{ box-sizing: border-box; }

body { margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; color: #222; background: #f7f5f0; } /* Link Styles */

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

/* Section Styles */

.main-nav { width: 100%; background: black; min-height: 30px; padding: 10px; position: fixed; text-align: center; } .nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; }

.nav .name { display: block; margin-right: auto; color: white; } .nav li { padding: 5px 10px 10px 10px; } .nav a { transition: all .5s; color: #999; } .nav a:hover,.nav a.selected { color: white; }

.back1 { text-align: center; background: url('images/auckland.jpg'), no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } .back2 { text-align: center; background: url('images/photo.jpg'), no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { text-align: center; background: url('images/hanoi3.jpg'), no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { line-height: 1.5; } header .profile-image { margin-top: 50px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid white; transition: all .5s; } header .profile-image:hover { transform: scale(1.2) rotate(5deg); }

.tag { background-color: #efefef; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; }

.location { background-color: #222; color: yellow; }

.card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; transition: all .5s; } .card:hover { border-color: #ff99ff; }

ul.skills { padding: 0; text-align: center; }

.skills li { border-radius: 6px; display: inline-block; background: #ff9904; color: white; padding: 5px 10px; margin: 2px; }

.skills li:nth-child(odd) { background: #0399ff; }

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

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }

footer .copyright { top: -8px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .4; transition: all .5s; } a.twitter { background-image: url(images/twitter.svg); } a.linkedin { background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); } a.social:hover { opacity: 1; } .clearfix { clear: both; }

/* Styles for larger screens */ @media screen and (min-width: 720px) {

.flex { display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; max-width: 1200px; -ms-flex-pack: distribute; justify-content: space-around; margin: 0 auto; }

header { min-height: 470px; }

.nav { max-width: 1200px; padding: 0 30px; }

main { padding-top: 20px; }

main p { line-height: 1.6em; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

}

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Viet Anh Ho's Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head> <body>

<div class="main-nav">
    <ul class="nav">
      <li class="name">Viet Anh Ho</li>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html" class="selected">Contact</a></li>
    </ul>
</div>

<header class="back2">
</header>

<main class="flex">
  <div class="card">
    <h2>General Information</h2>
    <p>If you have any question, please don't hesitate to contact me!</p>
    <p>Phone contact and email are the best way to reach me.</p>
  </div> 

  <div class="card">
    <h2>Contact Details</h2>
    <ul class="contact-info">
      <li class="phone"><a href="mobile:+64220657692">+64220657692</a></li>
      <li class="mail"><a href="mailto:vietanhho152@gmail.com">vietanhho152@gmail.com</a></li>

    </ul> 
  </div> 

</main>
<footer>
  <ul>
    <li><a href="https://twitter.com/VietAnhHo" class="social twitter">Twitter</a></li>
    <li><a href="https://www.linkedin.com/in/viet-anh-ho-86b755122?trk=nav_responsive_tab_profile_pic" class="social linkedin">LinkedIn</a></li>
    <li><a href="https://github.com/vietanhho152" class="social github">Github</a></li>
  </ul>
  <p class="copyright">&copy; 2016 Viet Anh Ho</p>
</footer>

</body> </html>

Answer 1 · 2016-07-18T16:20:28Z

July 18, 2016 4:20pm

My suggestion is to start from scratch. your a .social needs a space between the 'a' and '.' as well. Start slow. add the back ground image, set it to no-repeat then move your text by adding padding left greater than the image in px width. also you may want to separate your clear fix out of your main code block. it is confusing and you can add notes explaining why the clear fix is needed.

I hope this helps. If it doesn't let me know and i can think on it some more.

Welcome to the Treehouse Community

Looking to learn something new?

Viet Anh Ho

Viet Anh Ho

Im trying to add iconography next to my contact info but it doesnt work. Can anyone help me, please? Thanks

1 Answer

Joshua Kelly

Joshua Kelly

Viet Anh Ho

Viet Anh Ho