JSFiddle - React, Tailwind, and code Playground

Menu Icon Comparsion

by Jennifer Perrin

HTML

<h1>
  Menu Icon Comparsion
</h1>
<div class='table px'>
  <div class='tr'>
    <div class='td'></div>
    <div class='td'>
      12px
    </div>
    <div class='td'>
      14px
    </div>
    <div class='td'>
      16px
    </div>
    <div class='td'>
      18px
    </div>
    <div class='td'>
      20px
    </div>
    <div class='td'>
      22px
    </div>
    <div class='td'>
      24px
    </div>
    <div class='td'>
      26px
    </div>
    <div class='td'>
      28px
    </div>
    <div class='td'>
      30px
    </div>
    <div class='td'>
      32px
    </div>
    <div class='td'>
      34px
    </div>
    <div class='td'>
      36px
    </div>
    <div class='td'>
      38px
    </div>
    <div class='td'>
      40px
    </div>
  </div>
  <div class='tr'>
    <div class='td'>
      Font Awesome
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
    <div class='td'>
      &#xf0c9;
    </div>
  </div>
  <div class='tr'>
    <div class='td'>
      Entypo
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
      &#9776;
    </div>
    <div class='td'>
   ...

CSS

@import url("http://weloveiconfonts.com/api/?family=fontawesome");
@import url("http://weloveiconfonts.com/api/?family=entypo");
@import url("http://weloveiconfonts.com/api/?family=typicons");
body {
  padding: 50px;
  font: .750em/1 sans-serif;
  color: #666;
  background: #eee;
}

h1 {
  margin: 0 0 20px;
}

.table {
  display: table;
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  background: #fff;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
}

.tr:first-child .td,
.td:first-child {
  background: #f5f5f5;
}

.td:first-child {
  width: 100px;
  text-align: right;
}

.tr:nth-child(2) .td:not(:first-child) {
  font-family: 'fontawesome';
}

.tr:nth-child(3) .td:not(:first-child) {
  font-family: 'entypo';
}

.tr:nth-child(4) .td:not(:first-child) {
  font-family: 'typicons';
}

.px .tr:not(:first-child) .td:nth-child(2) {
  font-size: 12px;
}

.px .tr:not(:first-child) .td:nth-child(3) {
  font-size: 14px;
}

.px .tr:not(:first-child) .td:nth-child(4) {
  font-size: 16px;
}

.px .tr:not(:first-child) .td:nth-child(5) {
  font-size: 18px;
}

.px .tr:not(:first-child) .td:nth-child(6) {
  font-size: 20px;
}

.px .tr:not(:first-child) .td:nth-child(7) {
  font-size: 22px;
}

.px .tr:not(:first-child) .td:nth-child(8) {
  font-size: 24px;
}

.px .tr:not(:first-child) .td:nth-child(9) {
  font-size: 26px;
}

.px .tr:not(:first-child) .td:nth-child(10) {
  font-size: 28px;
}

.px .tr:not(:first-child) .td:nth-child(11) {
  font-size: 30px;
}

.px .tr:not(:first-child) .td:nth-child(12) {
  font-size: 32px;
}

.px .tr:not(:first-child) .td:nth-child(13) {
  font-size: 34px;
}

.px .tr:not(:first-child) .td:nth-child(14) {
  font-size: 36px;
}

.px .tr:not(:first-child) .td:nth-child(15) {
  font-size: 38px;
}

.px .tr:not(:first-child) .td:nth-child(16) {
  font-size: 40px;
}

.em .tr:not(:first-child) .td:nth-child(2) {
  font-size:...