Font Awesome Examples

by Amal Das

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="load">
<i class="fa fa fa-envelope fa-stack-1x"></i>
<i class="fa fa fa-envelope fa-stack-1x"></i>
<i class="fa fa fa-envelope fa-stack-1x"></i>
<i class="fa fa fa-envelope fa-stack-1x"></i>
</div>

CSS

body{background:#5d479c;}
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load i{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{color:#ffffff;animation-delay:-1.5s}
.load :nth-child(2){color:#ffffff;animation-delay:-1s}
.load :nth-child(3){color:#ffffff;animation-delay:-0.5s}
.load :last-child{color:#ffffff}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}


Resources1×0.5×0.25×Rerun