A Pen by Arsen Zbidnyakov.

index.html

<div id="container">

<div id="icon-box">
  <span><i class="fa fa-camera fa-lg"></i></span>
</div>

<div id="icon-box">
  <span><i class="fa fa-globe fa-lg"></i></span>
</div>
  
<div id="icon-box">
  <span><i class="fa fa-cloud fa-lg"></i></span>
</div>
  
<div id="icon-box">
  <span><i class="fa fa-tablet fa-lg"></i></span>
</div>

<div id="icon-box">
  <span><i class="fa fa-comment fa-lg"></i></span>
</div>
  
<div id="icon-box">
  <span><i class="fa fa-umbrella fa-lg"></i></span>
</div>

<div id="icon-box">
  <span><i class="fa fa-rotate-right fa-lg"></i></span>
</div>
  
<div id="icon-box">
  <span><i class="fa fa-twitter fa-lg"></i></span>
</div>
  
<div id="icon-box">
  <span><i class="fa fa-facebook-square fa-lg"></i></span>
</div>

<div id="icon-box">
  <span><i class="fa fa-github fa-lg"></i></span>
</div>

</div>

Long-Shadows-for-Font-Awesome.markdown

Long Shadows for Font Awesome

Long shadow generator for Font Awesome. Built with SASS (SCSS). Fully customizable.

A Pen by Arsen Zbidnyakov on CodePen.

License.

script.js

/*

  Hey, mate! 
  
  Just edit variables at the top to customize icons, if you need.
  
  More icons here: http://fortawesome.github.io/Font-Awesome/icons/
  
*/

style.scss

@import "compass";
/* -- Variables -- */
$icolor: #fff;      /* icon color       */
$scolor: #12664b;   /* shadow color     */
$bcolor: #1b926c;   /* background color */
$bradius: 15;       /* bg border radius */
$length: 150;       /* box length       */

@mixin long-shadow ($scolor, $length) {
  $list: ();
  @for $i from 1 through $length {
    $list: append($list, $scolor $i+px $i+px, comma);
  }
  text-shadow: $list;
}

#icon-box span {
  display: block;
  position: absolute;
  height: $length+px;
  width: $length+px;
  color: $icolor;
  @include long-shadow ($scolor, $length);
}

@mixin border-radius ($bradius) {  
  -webkit-border-radius: $bradius+px;
  -moz-border-radius: $bradius+px;
  -ms-border-radius: $bradius+px;
  border-radius: $bradius+px;
}

#icon-box {
  position: relative;
  text-align: center;
  overflow: hidden;
  width: $length+px;
  height: $length+px;
  font-size: $length/2+px;
  line-height: $length+px;
  background-color: $bcolor;
  @include border-radius ($bradius);
}

/* Help Styles */

#container {
  text-align: center;
}

#container div {
  display: inline-block;
  margin: .5em;
}

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

That's awesome!