JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<ul>
    <li><a href="#" class="fontawesome social-icon twitter">Twitter</a></li>
    <li><a href="#" class="fontawesome social-icon facebook">Facebook</a></li>
    <li><a href="#" class="fontawesome social-icon instagram">Instagram</a></li>
    <li><a href="#" class="fontawesome social-icon pinterest">Pinterest</a></li>
    <li><a href="#" class="fontawesome generic-icon email">Email</a></li>
</ul>

CSS

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.social-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
}

.generic-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
}

.twitter::before {
    content: "\f099";
}

.facebook::before {
    content: "\f39e";
}

.instagram::before {
    content: "\f16d";
}

.pinterest::before {
    content: "\f231";
}

.email::before {
    content: "\f0e0";
}