JSFiddle - React, Tailwind, and code Playground

by Trevor Dixon

HTML

<style id="icon-styles"></style>
<div id="icons"></div>

CSS

@font-face {
	font-family: 'AdobeIcons';
	src: url(https://vm410.dev.ut1.omniture.com/p/ap/1.2/fonts/AdobeIcons-b35bb1d5cb183f60bd25900ca97e8142.eot);
	src: url(https://vm410.dev.ut1.omniture.com/p/ap/1.2/fonts/AdobeIcons-b35bb1d5cb183f60bd25900ca97e8142.ttf) format("truetype"), url(https://vm410.dev.ut1.omniture.com/p/ap/1.2/fonts/AdobeIcons-b35bb1d5cb183f60bd25900ca97e8142.woff) format("woff"), url(https://vm410.dev.ut1.omniture.com/p/ap/1.2/fonts/AdobeIcons-b35bb1d5cb183f60bd25900ca97e8142.svg#AdobeIcons) format("svg");
	font-weight: normal;
	font-style: normal;
}

#icons {
    word-wrap: break-word;
    line-height: 50px;
}

.icon:after {
    font-family: AdobeIcons;
    font-size: 32px;
    margin-right: 20px;
    margin-left: 5px;
}

JavaScript

var css = '';
for (var i = 61696; i < 62100; i++) {
    css += '.icon.i' + i + ':after { content: "\\' + i.toString(16) + '"; } ';
    $('#icons').append(
        $('<span />').text(i.toString(16)).addClass('icon').addClass('i' + i)
    );
}
$('#icon-styles').html(css);