<span class="fa-mixed">
  <i class="fa-under fa fa-star fa-5x" style="color:gray;"></i>
  <i class="fa-over fa fa-star fa-5x" style="color:orange;"></i>
</span>
.fa-mixed {
  position: relative;
  display: inline-block;
}
.fa-under {
  vertical-align: top;
}
.fa-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.