Star Rating

by Diego La Monica

HTML

<script src="https://kit.fontawesome.com/a9758a1a63.js"></script>
<div class="star-component" data-rating="4.5">
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star-half fa-fw"></i>
   <i class="far fa-star-half fa-fw fa-flip-horizontal text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
</div>

SCSS

/* Star rating */
.star-component {

	.fa-star-half.fa-flip-horizontal {
		margin-left: -1.5rem;
		position:    relative;
	}
}