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 Tim Watkins
Tim Watkins
16,034 Points

My icon not showing up. and bullet points not going away

following the basic website videos along not sure what I'm doing wrong. trying to get the icon next to my contacts

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tim Watkins | Learning to code</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Cabin:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <header> <a href="index.html" id="logo"> <h1>Tim Watkins</h1> <h2>Coding</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'm will be looking for work in the near future. Please don't hesitate to contact me!</p>
    <p> Please only use phone for urgent inquiers other wise twitter and email are the best way to contact me.</p>
  </section>

  <section>
    <h3>Contact Details</h3>
    <ul class="Contact Info"> 
    <li class="phone"><a href="tel:555-1234">555-1234</a> </li>
      <li class="mail"> <a href="mailto:tim@example.com">tim@example.com</a> </li>
      <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=timsepicfailure">@Timsepicfailure </a></li>
     </ul>

  </section>
  <footer>
    <a href="http://twitter.com/timsepicfailure"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>
    <a href="http://facebook.com/tim.watkins.328"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a>
    <p>&copy; 2016 Tim Watkins.</p>
  </footer> </div> 
</body>

</html> ~~~~~~~now css

/************************************** GENERAL ****************************/

body { font-family: 'Cabin', 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: 'Montserrat', Cabin; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 1.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: 700; padding: 15px 10px; }

/*************************************** FOOTER ************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: lawngreen; }

.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 ************************************/

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

.contact.-info li.twitter a { background-image: url('../img/twitter.png'); }
/*************************************** COLORS ************************************/

/* green header*/ header { background-color: #6ab47b; border-color: #599a68; }

/* logo text*/ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b;
}

/* nav background on mobile devices*/ nav { background: #599a68; } /* nav link*/ nav a , nav a:visited { color: #fff; } /* selected nav link*/ nav a.selected, nav a:hover { color: #32673f; } /* site body */ body { background-color: #fff; color: #999; }

2 Answers

jag
jag
18,266 Points 
<ul class="Contact Info"> </ul>


<!-- Switch it to this -->

<ul class="contact-info"> </ul>

You added a class to the ul tags of "Contact Info" but in your css you have the class as .contact-info.

Fixing the class should also fix the icons to show up properly.

For the icons you can try font awesome and use their social class that adds twitter & facebook as text.

Demo

Tim Watkins
Tim Watkins
16,034 Points
Tim Watkins
Tim Watkins
16,034 Points

That work. Thanks