JSFiddle - React, Tailwind, and code Playground

Pure CSS Icons

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>

<h1>Pure CSS Icons</h1>
<h2>No extra markup &middot; No solid colour background required</h2>

<a class="folder icon" title="Folder" href="#"></a>
<a class="newDoc icon" title="New Document" href="#"></a>
<a class="mail icon" title="Mail" href="#"></a>
<a class="contacts icon" title="Contacts" href="#"></a>
<a class="calendar icon" title="Calendar" href="#"></a>
<a class="clock icon" title="Clock" href="#"></a>
<a class="chart icon" title="Chart" href="#"></a>
<a class="prev icon" title="Previous" href="#"></a>
<a class="next icon" title="Next" href="#"></a>
<a class="flag icon" title="Flag" href="#"></a>
<a class="add icon" title="Add" href="#"></a>
<a class="subtract icon" title="Subtract" href="#"></a>
<a class="tick icon" title="Tick" href="#"></a>
<a class="cross icon" title="Cross" href="#"></a>
<a class="user icon" title="User" href="#"></a>
<a class="comment icon" title="Comment" href="#"></a>
<a class="heart icon" title="Heart" href="#"></a>
<a class="home icon" title="Home" href="#"></a>
<a class="batFull icon" title="Full Battery" href="#"></a>
<a class="batEmpty icon" title="Empty Battery" href="#"></a>
<a class="play icon" title="Play" href="#"></a>
<a class="pause icon" title="Pause" href="#"></a>
<a class="stop icon" title="Stop" href="#"></a>
<a class="eject icon" title="Eject" href="#"></a>

CSS

body {
    background-color: #f6f6f6;
    background-image: -webkit-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-image:    -moz-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-image:         radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-size: 4px 4px;
    margin: 0 auto;
    max-width: 720px;
    padding: 100px 50px 50px;
    text-align: center;
}
h1 {
    color: #f66;
    font: bold 48px/1 Quicksand, sans-serif;
    margin-bottom: 32px;
    text-shadow: 0 1px 0 #f6f6f6,
                 0 3px 0 #ccc;
}
h2 {
    color: #555;
    font: bold 24px/1.8 Quicksand, sans-serif;
    margin-bottom: 36px;
    text-shadow: 0 1px 0 #f6f6f6,
                 0 2px 0 #ccc;
}
p {
    color: #777;
    font: bold 16px/3 Quicksand, sans-serif;
    margin-top: 30px;
}
p a {
    border-bottom: 2px solid #fc6;
    color: #777;
    text-decoration: none;
}
p a:hover {
    border-color: #f66;
}
a.icon {
    margin: 12px;
}

/* Icon Base Styles */

a.icon {
    background-color: #fed;
    border: 2px solid #fc6;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
a.icon:after,
a.icon:before {
    background: #fed;
    border: 2px solid #fc6;
    content: '';
    position: absolute;
}
a.icon:hover,
a.icon:hover:after,
a.icon:hover:before {
    background-color: #ffe;
}

/* New Document Icon */

a.newDoc {
    border-top: 2px solid #fc6;
    box-shadow: inset 0 0 0 2px #fed;
    height: 15px;
    top: 10px;
    width: 20px;
}
a.newDoc:hover {
    box-shadow: inset 0 0 0 2px #ffe;
}
a.newDoc:after {
    height: 10px;
    right: 1px;
    top: -9px;
    width: 10px;
    z-index: -1;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.newDoc:before {
    border-bottom: none;
    border-right: 2px solid #fc6;
    height: 10px;
  ...