JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- for html: https://fortawesome.github.io/Font-Awesome/cheatsheet/ -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="test">&#xf1c1;</div>

CSS

/** for css: http://fortawesome.github.io/Font-Awesome/icon/file-pdf-o/ */   
.test {
    background-color:#f00;
    color:#000;
    font-family:FontAwesome;
    height:50px;
    width:50px;
}
.test::before {
    content:"\f1c1";
}
.test::after {
    content:"\f121";
}