JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<!-- <span aria-hidden="true" data-icon="&#x21dd;"></span>
<span aria-hidden="true" data-icon="&#x25d2;"></span> -->

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25d3;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

CSS

[data-icon]:before { font:100px Arial; content: attr(data-icon); color:rgba(255,255,255,.5);  background: -moz-linear-gradient(top, #2F2727, #1a82f7); text-shadow:0 -1px 0 rgba(0,0,0,.4); }

.icon-alone { text-decoration:none; display: inline-block; /* Fix for clickability issue in WebKit */ }
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

JavaScript

/* How to use icon fonts

http://css-tricks.com/html-for-icon-font-usage/

*/