Star Rating

by Diego La Monica

HTML

<script src="https://kit.fontawesome.com/a9758a1a63.js"></script>
<div class="star-component" data-rating="2.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,
	.fa-star-half {
		display: none;
	}

	.fa-star-half.fa-flip-horizontal {
		margin-left: -1.5rem;
		position:    relative;
	}
  
  
	&[data-rating*="."]
	.fa-star-half {
		display: inline-block;
	}

   @for $rate from 0 to 5 {

      &[data-rating^="#{$rate}"] .fas.fa-star:nth-child(-1n+#{$rate}),
      &[data-rating="#{$rate}"] .far.fa-star:nth-child(-1n+#{12-$rate} ),
      &[data-rating^="#{$rate}."] .far.fa-star:nth-child(-1n+#{11-$rate}) {
         display: inline-block;
      }

   }
  
}