JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<ul class="icons">
    <li class="star"></li>
    <li class="star-empty"></li>
    <li class="user"></li>
    <li class="github"></li>
</ul>

SCSS

/*
 * Unicode range
 */
@font-face {
  font-family: 'Typicons';
  font-style: 'normal';
  font-weight: 'normal';
  src: url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.eot');
  src: url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.eot?#iefix') format('eot'), 
  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.woff') format('woff'), 
  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.ttf') format('truetype'), 
  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.svg#TypiconsRegular') format('svg');
    
  /* github */
  unicode-range: U+A;
}

@font-face {
  font-family: 'zocial';
  font-style: 'normal';
  font-weight: 'normal';
  src: url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot');
  src: url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot?#iefix') format('eot'), 
  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.woff') format('woff'), 
  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), 
  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
    
  /* star */
  unicode-range: U+B;
}

.icons {
  font:1em 'Typicons', 'zocial';
    
  /* Typicons */
  .star:before {
     content: "A";            
  }

  .star-empty:before {
     content: "B";            
  }

  .user:before {
     content: "A";            
  }

  /* zocial */
  .github:before {
     content: "B";            
  }
}