Invisible, Clickable, Twitter Icon.

Hey everyone, I'm having a little bit of trouble.

See, everything else works. My email and phone icon appear as they should, on the left hand side, right? However, when it comes down to twitter, the icon is there - but invisible. I'm not entirely sure what I'm doing wrong, and I'm having a difficult time trying to solve this on my own. I've searched the forums for help; however, I've had no luck in finding any answer that will help me find a solution to this problem.

My code for this project is below. Please let me know, any and all help is appreciated. Thanks! CSS

.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.tiwtter a { background-image: url('../img/twitter.png') }

HTML <section>

<h3>Contact Details</h3>

<ul class="contact-info">

<li class="phone"><a href="tel:000-0000">000-0000</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>