FA 4.3.0 stack with text shadow

Base template

by Andrey Izman

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>


<span class="fa-stack" style="font-size:44px;">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="drafting-compass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-drafting-compass fa-w-16 fa-3x" style="
    fill: #333;
    height: 15px;
"><path fill="currentColor" d="M450.33 296.36c14.32-13.92 27.51-29.15 38.7-46.11 5.02-7.6 2.23-18.06-5.64-22.62l-13.79-8c-7.39-4.28-16.54-1.77-21.29 5.34-6.52 9.75-13.92 18.7-21.73 27.24l-76.3-141.76c.72-4.75 1.45-9.51 1.45-14.46C351.72 42.98 308.86 0 256 0s-95.72 42.98-95.72 95.99c0 4.95.73 9.71 1.45 14.46L85.46 252.16c-7.85-8.49-15.24-17.44-21.76-27.19-4.75-7.11-13.9-9.63-21.29-5.34l-13.79 8c-7.87 4.56-10.66 15.02-5.64 22.62 11.17 16.92 24.68 31.66 39.06 45.44L0 410.94l7.91 65.75c1.5 12.62 8.63 23.51 19.6 29.89 6.2 3.59 13.06 5.42 19.94 5.42 5.3 0 10.66-1.08 15.74-3.27l61.44-26.33 62.2-115.57c22.37 5.83 45.54 9.13 69.17 9.13 23.65 0 46.91-3.07 69.31-8.87l62.05 115.3 61.48 26.34c5.08 2.17 10.41 3.25 15.7 3.25 6.89 0 13.74-1.83 19.94-5.42 10.97-6.37 18.1-17.26 19.57-29.83l7.95-65.81-61.67-114.56zM256 48c26.43 0 47.86 21.49 47.86 48s-21.43 48-47.86 48-47.86-21.49-47.86-48S229.57 48 256 48zM90.48 444.85l-36.3 15.56-4.83-40.09 138.38-257.15c11.16 11.41 25.27 19.66 40.93 24.37l.15.28L90.48 444.85zM256 327.98c-15.5 0-30.71-1.85-45.58-4.97L256 238.32l45.56 84.65c-14.89 3.03-30.07 5.01-45.56 5.01zm27.18-140.17l.15-.28c15.67-4.71 29.77-12.96 40.93-24.37l65.57 121.85c-13.04 9.27-27.14 16.89-41.8 23.3l-64.85-120.5zm174.64...

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;
    }
    
    .icon-background4 {
    color: #c0ffc0;
}

.icon-background6 {
    color: #40c040;
}

.icon-background5 {
    color: #c0c0ff;
}

.fa-stack {
  position: relative;
}
.fa-br {
  position: absolute;
  bottom: 0;
  right: 0;
}
.fa-br::before {
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 1;
}