1.1.9 #permalink Star Type
The stars can be generated out of three different types. characters, svg's of any icon font
Examples
Default styling
.star-icon
Star-Characters from default browser font
.star-custom-icon
Star-Characters from icon-fonts like fontawesome and others
.star-svg
Star-Vectors form the shipped svg images
Markup
<div class="rating value-3 half [modifier class]">
<div class="star-container">
<div class="star">
<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-angle-up"></i>
<i class="star-half fa fa-angle-left"></i>
<i class="star-filled fa fa-angle-right"></i>
</div>
<div class="star">
<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-angle-up"></i>
<i class="star-half fa fa-angle-left"></i>
<i class="star-filled fa fa-angle-right"></i>
</div>
<div class="star">
<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-angle-up"></i>
<i class="star-half fa fa-angle-left"></i>
<i class="star-filled fa fa-angle-right"></i>
</div>
<div class="star">
<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-angle-up"></i>
<i class="star-half fa fa-angle-left"></i>
<i class="star-filled fa fa-angle-right"></i>
</div>
<div class="star">
<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-angle-up"></i>
<i class="star-half fa fa-angle-left"></i>
<i class="star-filled fa fa-angle-right"></i>
</div>
</div>
</div>
Source:
src/kss-documentation/modifiers.kss.scss, line 1667