icon fonts - list

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div>
<h2>Latest CodePen's</h2>
<ul class="love">
  <li data-text="2">test</li>
  <li data-text="35">test 2</li>
  <li data-text="0">test 3</li>
</ul>
</div>

<div>
<h2>Downloads</h2>
<ul class="download">
  <li data-text="13.37 GB">asdf</li>
  <li data-text="42 MB">asdf</li>
  <li data-text="8 KB">asdf</li>
</ul>
</div>
    
<div>
<h2>Your account</h2>
<ul class="account">
  <li>\f08a</li>
  <li>Friends</li>
  <li>Comments</li>
  <li>Settings</li>
  <li>Logout</li>
</ul>
</div>

SCSS

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/**/
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
 height:100%;
 width:100%;    
 overflow:hidden;
 background:#fff;
 margin:.5em;
 font:1em sans-serif;
}

div {
  float:left;
  width:33%;
  padding:0 .5em;
}

h2 {
  margin:.75em 0 .55em 0;
}

ul {
  width:100%;  
    
  li {
    position:relative;
    padding:.3em .3em .3em 1.5em;
    transition:background .3s ease-in-out, color .3s ease-in-out, box-shadow .2s ease-in-out;
    
    &:before {
      position:absolute;
      top:.425em;
      font-family: 'FontAwesome', sans-serif;
      margin:0 .35em 0 -1.35em;
      vertical-align:bottom;
    }

    &:hover {
      color: rgba(255, 255, 255, .8);
      padding-left:1.5em;
    
      &:before {
        color: rgba(255, 255, 255, 1);
        right: 0;
        transform:scale(2.5, 2.5) translate(-.25em, .15em);
      }

      &:after {
        position:absolute;
        text-align:center;
        content:attr(data-text);
      }
    }
  }
}

.love {
  li {  
    &:before {
      content: "\f004";
      color: rgba(220, 20, 20, .6);
    }

    &:after {
      color:rgba(220, 20, 20, .6);
    }

    &:hover {
      background: rgba(220, 20, 20, .6);
    
      &:after {
        width:2em;
        text-align:center;
        right: .445em;
      }
    }
  }
}

.download {
  li {  
    &:before {
      content: "\f019";
      color: rgba(50, 50, 50, .5);
    }

    &:hover {
      background:rgba(0, 140, 0, .7);
    
      &:before {
        color: rgba(255, 255, 255, .2);
      }    
    
      &:after {
        text-align:center;
        right: .35em;
      }
    }
  }
}

.account {
  padding:.75em;
  background:rgba(40, 40, 40, .6);
  border: 3px solid rgba(0, 0, 0, .2); 
  background-color:rgba(0, 0, 0, .2);
  background-image:radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
  box-shadow:inset 0 0 12px 0 rgba(0, 0, 0, .2);
  color:rgba(255,...