Css Star Rating

1.2.1.1.3 #permalink Star types

Toggle example guides Toggle HTML markup

The different star types.

Examples
Default styling
.svg
Stars svg icon is used
.icon
Stars character icon is used
.custom-icon
Stars character icon is used
Markup 
<div class="star empty [modifier class]">
  <svg class="star-empty">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
  </svg>
  <svg class="star-half">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
  </svg>
  <svg class="star-filled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
  </svg>
<i class="star-empty fa fa-star-o"></i>
  <i class="star-half fa fa-star-half-o"></i>
  <i class="star-filled fa fa-star"></i>
</div>
<div class="star half [modifier class]">
  <svg class="star-empty">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
  </svg>
  <svg class="star-half">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
  </svg>
  <svg class="star-filled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
  </svg>
  <i class="star-empty fa fa-star-o"></i>
  <i class="star-half fa fa-star-half-o"></i>
  <i class="star-filled fa fa-star"></i>
</div>
<div class="star filled [modifier class]">
  <svg class="star-empty">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
  </svg>
  <svg class="star-half">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
  </svg>
  <svg class="star-filled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
  </svg>
 <i class="star-empty fa fa-star-o"></i>
  <i class="star-half fa fa-star-half-o"></i>
  <i class="star-filled fa fa-star"></i>
</div>
Source: src/kss-documentation/elements.kss.scss, line 145