JSFiddle - React, Tailwind, and code Playground

HTML

<i class="fa fa-heart"></i>

CSS

@font-face {
    font-family:'FontAwesome';
    src: url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.fa-heart:before {
  content: "\f004";
}