JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="contact-entries">
    <li class="icon-mobile-phone">Mobile</li>
    <li class="icon-phone">Landline</li>
    <li class="icon-skype contact-skype"><a href="skype:misc?chat">misc</a>

    </li>
    <li class="icon-envelope-alt"><a href="mailto:contact@misc.org" title="Email">contact@misc.org</a>

    </li>
    <li class="icon-map-marker">Address</li>
</ul>

CSS

.contact-entries > li {
    position:relative;
}
.contact-entries > li:before {
    position:absolute;
    left:0;
    top:0;
    color: white;
    font-size:20px;
}
.contact-skype {
    color: #00abeb;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
}
a{
    color:inherit;
}