FA 4.3.0 stack with text shadow

Base template

by tagliala

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack">
   <i class="fa fa-user fa-stack-2x awesomeEntity"></i>
   <i class="fa fa-spinner fa-spin fa-stack-1x awesomeAction"></i>
</span>
<br>
<span class="fa-stack awesomeBlue">
    <i class="fa fa-user fa-stack-2x awesomeEntity"></i>
   <i class="fa fa-search fa-stack-1x awesomeAction"></i>
</span>

CSS

body {
    font-size: 14px;
}

.awesomeEntity, .awesomeAction {
        color: white; 
    }
    .awesomeEntity {
        text-shadow: 2px 3px 5px black;
    }
    .awesomeAction {        
        font-size: 120%;
        margin: 40% 0px 0px 50%;
        text-shadow: -1px 0 black, 0 2px 3px black, 2px 0 3px black, 0 -1px black;
    }

    /* awesomeBlue */
    span.awesomeBlue i {
        color: #2E5888;
    }
    span.awesomeBlue i.awesomeAction {
        text-shadow: -1px 0 white, 0 2px 3px black, 2px 0 3px black, 0 -1px white;
    }