Icons not appearing, bullets still remain Where is my mistake? I can't find it!

Please provide a screenshot of the code you are typing in.

The link above should take you to my workspace.

I have also copied bits of it below:

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

and the html snippet is:

<div id="wrapper"> <section> <h3>General Information</h3> <p> I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to reach out to me.</p> <p>Please only use phone contact for urgent inquiries. Otherwise, email and twitter are the best way to reach me.</p> </section>
<section> <h3>Contact Details</h3> <ul class="contact info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp"> @nickrp</a></li> </ul> </section>

Wrong class syntax. Please check here http://www.w3schools.com/css/css_selectors.asp