Custom Font Awesome Satellite Icon
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="gps-loading">
<div class="satellite-icon">
<i class="icon-moon icon-2x"></i>
<i class="icon-rss icon-large"></i>
<i class="icon-caret-up"></i>
</div>
</div>
CSS
.satellite-icon {
position: relative;
width: 40px;
height: 40px;
float: left;
margin-right: 10px;
}
.gps-loading {
line-height: 40px;
}
.satellite-icon i.icon-rss {
position: absolute;
left: 18px;
top:1px;
-webkit-animation: pulsate 1s ease;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
.satellite-icon i.icon-moon {
position: absolute;
left: 6px;
top:5px;
-webkit-transform: rotateZ(-26deg);
}
.satellite-icon i.icon-caret-up {
position: absolute;
left: 8px;
top: 24px;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1) rotateZ(-12deg); opacity: 0.0; }
50% {opacity: 1.0; -webkit-transform: rotateZ(-12deg)}
100% {-webkit-transform: scale(1.2, 1.2) rotateZ(-12deg); opacity: 0.0; }
}