JSFiddle - React, Tailwind, and code Playground

by chad

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<p>The following rows use a 100px font size for both the text and the icons. Notice that neither fills the entire 100px area. The colored margins are to help visualize the icon font grid.</p>

<div class="row">
    <span class="text sans">100px</span><span class="meter full"></span>
    <span class="text sans">85px</span><span class="meter grid"></span>
    <span class="icons">
        <i class="fa fa-square"></i>
    </span>
</div>

<div class="row">
    <span class="icons">
        <i class="fa fa-square"></i>
        <i class="fa fa-check-circle-o"></i>
        <i class="fa fa-envelope"></i>
        <i class="fa fa-phone"></i>
        <i class="fa fa-search"></i>
    </span>
</div>

<div class="row">
    <span class="icons">
        <i class="fa fa-long-arrow-right"></i>
        <i class="fa fa-long-arrow-up"></i>
        <i class="fa fa-long-arrow-down"></i>
        <i class="fa fa-gift"></i>
        <i class="fa fa-rocket"></i>
    </span>
</div>

<p>These icons and labels are all set to a 32px font size. Notice how the size and vertical alignment of the icons compliments the text.</p>

<div class="standard sans">
<i class="fa fa-square fa-fw"></i> Square<br>
<i class="fa fa-check-circle-o fa-fw"></i> Check Circle<br>
<i class="fa fa-envelope fa-fw"></i> Mail<br>
<i class="fa fa-phone fa-fw"></i> Phone<br>
<i class="fa fa-search fa-fw"></i> Search<br>
<i class="fa fa-long-arrow-right fa-fw"></i> Long Arrow Right<br>
<i class="fa fa-long-arrow-up fa-fw"></i> Long Arrow Up<br>
<i class="fa fa-long-arrow-down fa-fw"></i> Long Arrow Down<br>
<i class="fa fa-gift fa-fw"></i> Gift<br>
<i class="fa fa-rocket fa-fw"></i> Rocket<br>
</div>

CSS

.serif {
    font-family: serif;
}
.sans {
    font-family: sans-serif;
}

.row {
    font-size: 100px;
    line-height: 100px;
    background: -webkit-linear-gradient(top, #ffff66 7px, #66ffff 7px, #66ffff 92px, #ffff66 92px, #ffff66 100px, #ffaaaa 100px);
    background: -moz-linear-gradient(top, #ffff66 7px, #66ffff 7px, #66ffff 92px, #ffff66 92px, #ffff66 100px, #ffaaaa 100px);
    background: linear-gradient(to bottom, #ffff66 7px, #66ffff 7px, #66ffff 92px, #ffff66 92px, #ffff66 100px, #ffaaaa 100px);
    margin-bottom: 10px;
    white-space: nowrap;
}
.text {
    vertical-align: top;
    line-height: 100px;
    display: inline-block;
}
.icons {
    height: 100px;
    display: inline-block;
    vertical-align: top;
}

.standard {
    font-size: 32px;
}

.meter {
    display: inline-block;
    width: 10px;
    vertical-align: top;
    background-color: black;
}
.full {
    height: 100px;
}
.grid {
    height: 85px;
    margin-top: 7px;
}