JSFiddle - React, Tailwind, and code Playground

HTML

<a class="logo wap8-icon" href="http://www.erikford.me">
<i aria-hidden="true" data-icon="E"></i>
<span>Erik Ford</span>
</a>

CSS

a.logo {
    background-color: #151515;
    border-bottom: medium none;
    color: #FFFFFF;
    display: block;
    font-size: 1.75em;
    line-height: 2.57143em;
    padding: 0 0.643em 0 0.536em;
    width: 1em;
}
a.logo span {
    left: -9999em;
    position: absolute;
    top: -9999em;
}
a.logo:hover {
    background-color: #00AED7;
}

@font-face {
    font-family: "WAP8-Icons";
    font-style: normal;
    font-weight: normal;
    src: url("http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.eot?#iefix") format("embedded-opentype"), url("http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.svg#WAP8-Icons") format("svg"), url("http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.woff") format("woff"), url("http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.ttf") format("truetype");
}
.wap8-icon [data-icon]:before {
    content: attr(data-icon);
    font-family: 'WAP8-Icons';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}