.far, .fas {
  color: #0066aa;
  font-size: 1.1em;
}

.far.left, .fas.left {
  float: left;
  margin-right: .5em;
}
.far.right, .fas.right {
  float: right;
  margin-left: .5em;
}

.far.white, .fas.white {
  color: #ffffff;
}

.far.black, .fas.black {
  color: #000000;
}

.far.grey, .fas.grey {
  color: #888888;
}

.far.red, .fas.red {
  color: #dd2211;
}

.far.green, .fas.green {
  color: #00cc00;
}

.far.blue, .fas.blue {
  color: #0060aa;
}

.far.orange, .fas.orange {
  color: #ffaa00;
}

.far.yellow, .fas.yellow {
  color: #ffdd00;
}


/** Animaties **/
.far.spin, .fas.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


button .far, button .fas {
  float: left;
  margin-right: .7em;
  color: #ffffff;
}
button.white .far, button.white .fas {
  color: #0060AA;
}
button.white:hover .far, button.white:hover .fas {
  color: #ffffff;
}
button .far.right, button .fas.right {
  float: right;
  margin-right: 0;
  margin-left: .7em;
}