Long shadow generator for Font Awesome. Built with SASS (SCSS). Fully customizable.
A Pen by Arsen Zbidnyakov on CodePen.
<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 shadow generator for Font Awesome. Built with SASS (SCSS). Fully customizable.
A Pen by Arsen Zbidnyakov on CodePen.
/* | |
Hey, mate! | |
Just edit variables at the top to customize icons, if you need. | |
More icons here: http://fortawesome.github.io/Font-Awesome/icons/ | |
*/ |
@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!