div.stars {
  float: left;
  display: inline-block;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding-left: 10px;
  font-size: 1.5em;
}

input.star:checked ~ label.star:before {
  content: '\f005';
  transition: all 0.25s;
}

input.star-1:checked ~ label.star:before {
  color: #f62;
}
input.star-2:checked ~ label.star:before {
  color: #ff8616;
}
input.star-3:checked ~ label.star:before {
  color: #ffc438;
}
input.star-4:checked ~ label.star:before {
  color: #ffdf35;
}
input.star-5:checked ~ label.star:before {
  color: #fff13d;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}