JSFiddle - React, Tailwind, and code Playground

HTML

<!-- http://www.w3.org/TR/wai-aria/states_and_properties#aria-label -->
<a href="http://twitter.com/genelocklin" class="icon-label" aria-label="Twitter" data-icon="&#xf081;"></a>

<!-- http://css-tricks.com/html-for-icon-font-usage/ -->
<a href="http://twitter.com/genelocklin" class="icon-alone">
  <span aria-hidden="true" data-icon="&#xf081;"></span>
  <span class="screen-reader-text">Twitter</span>
</a>

CSS

@font-face {
    font-family: 'fontawesome';
    src: url('http://cl.ly/Gw0y/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
         url('http://cl.ly/GwA8/fontawesome-webfont.woff') format('woff'), 
         url('http://cl.ly/GkRq/fontawesome-webfont.ttf')  format('truetype'),
         url('http://cl.ly/Gw7N/fontawesome-webfont.svg') format('svg'); }

* { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; }

[data-icon]:before {
  font-family: 'fontawesome';
  content: attr(data-icon);
}

[aria-hidden="true"] { 
  speak: none; }

.icon-alone, .icon-label {
  display: inline-block; }

.screen-reader-text {
  position: absolute;
  top: -999em;
  left: -999em; }

a { 
  text-decoration: none; 
  color: #32c9f6; 
  font-size: 6em; 
  margin: 0 .075em; }

body { 
  max-width: 480px;
  width: 90%;
  margin: 3em auto; }

JavaScript

// http://twitter.com/genelocklin