None of the icons will appear

I believe I have the code inputted correctly, but none of the icon images are appear in my contact info list. Any help would be greatly appreciated! Thanks!

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

<h3>Contact Information</h3>
<ul class="contact-info">
  <li class="phone"><a href="tel:717-873-9056">717-873-9056</a></li>
  <li class="mail"><a href="mailto:ctate95@outlook.com">ctate95@outlook.com</a></li>
  <li class="twitter"><a href="https://twitter.com/intent/tweet?screen_name=chandlertate95">@chandlertate95</a></li>
</ul>

</section>