BS 3.0.2 + FA 4.0.3

BS 3.0.2 + FA 4.0.3 skeleton

by tagliala

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css">
<div class="row">
    <div class="col-xs-6">
      <div class="spin-test">
        <span class="fa fa-4x fa-cog"></span>
        <span class="fa fa-4x fa-spin-sp fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-3x fa-cog"></span>
        <span class="fa fa-3x fa-spin-sp fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-2x fa-cog"></span>
        <span class="fa fa-2x fa-spin-sp fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-cog"></span>
        <span class="fa fa-spin-sp fa-cog"></span>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="spin-test">
        <span class="fa fa-4x fa-cog"></span>
        <span class="fa fa-4x fa-spin fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-3x fa-cog"></span>
        <span class="fa fa-3x fa-spin fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-2x fa-cog"></span>
        <span class="fa fa-2x fa-spin fa-cog"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-cog"></span>
        <span class="fa fa-spin fa-cog"></span>
      </div>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-6">
      <div class="spin-test">
        <span class="fa fa-4x fa-spinner"></span>
        <span class="fa fa-4x fa-spin-sp fa-spinner"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-3x fa-spinner"></span>
        <span class="fa fa-3x fa-spin-sp fa-spinner"></span>
      </div>
      <div class="spin-test">
        <span class="fa fa-2x fa-spinner"></span>
        <span class="fa fa-2x fa-spin-sp fa-spinner"></span>
      </div>
      <div class="spin-test">
        <span class="fa...

CSS

body {
    padding: 20px;
}

.spin-test {
    position: relative;
}

.spin-test .fa {
    top: 0;
    left: 0;
}

.fa {
}
.fa-spin {
    color: green;
}


.fa-spin-sp {
    color: red;
  -webkit-animation: spin-sp 2s infinite linear;
  -moz-animation: spin-sp 2s infinite linear;
  -o-animation: spin-sp 2s infinite linear;
  animation: spin-sp 2s infinite linear;
}
@-moz-keyframes spin-sp {
  0% {
    -moz-transform: translate3d(0, 0, 0) rotate(-0.001deg);
  }
  100% {
    -moz-transform: translate3d(0, 0, 0) rotate(358.999deg) ;
  }
}
@-webkit-keyframes spin-sp {
  0% {
    padding-top: 2px;
    -webkit-transform: rotate3d(0, 0, 1, 0.001deg);

  }
  100% {
    padding-top: 2px;
    -webkit-transform: rotate3d(0, 0, 1, 360.001deg);
  }
}
@-o-keyframes spin-sp {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin-sp {
  0% {
    transform: translate3d(0, 0, 0) rotate(-0.001deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360.001deg);
  }
}