Pure CSS Icons

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


<p>Created by <a href="http://joshnh.com/2012/02/pure-css-icons/">Joshua Hibbert</a>.</p>

SCSS

$iconBackground:  #fed;
$iconBorder:      #fc6;
$iconHover:       #ffe;

/* we're not using %placeholders because of @silent confusion: http://j.mp/zBeBFl */

.icon {
    background-color: $iconBackground;
    border: 2px solid $iconBorder;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.icon:after,
.icon:before {
    background: $iconBackground;
    border: 2px solid $iconBorder;
    content: '';
    position: absolute;
}
.icon:hover,
.icon:hover:after,
.icon:hover:before {
    background-color: $iconHover;
}


@mixin newDoc { 
      @extend .icon;
      border-top: 2px solid $iconBorder;
      box-shadow: inset 0 0 0 2px $iconBackground;
      height: 15px;
      top: 10px;
      width: 20px;
      &:hover {
          box-shadow: inset 0 0 0 2px $iconHover;
      }
      &: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);
      }
      &:before {
        border-bottom: none;
        border-right: 2px solid $iconBorder;
        height: 10px;
        left: -2px;
        top: -12px;
        width: 11px;
      }
}


@mixin prev {
    @extend .icon;
    border-radius: 100%;
    height: 26px;
    width: 26px;
    &:after,
    &:before {
      border-radius: 2px;
      height: 0;
      left: 5px;
      width: 9px;
    }
    &:after {
      bottom: 8px;
      -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
           -o-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    &:before {
    top: 8px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform:...