Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
<!-- Small sized ratings -->
<span class="ratings">
<i class="fa fa-star-o rating-fill rating-sm"></i>
<i class="fa fa-star-o rating-fill rating-sm"></i>
<i class="fa fa-star-o rating-fill rating-sm" ></i>
<i class="fa fa-star-o rating-fill rating-sm"></i>
<i class="fa fa-star-o rating-fill rating-sm"></i>
</span>
<!-- Medium sized ratings -->
<span class="ratings">
<i class="fa fa-star-o rating-fill rating-md"></i>
<i class="fa fa-star-o rating-fill rating-md"></i>
<i class="fa fa-star-o rating-fill rating-md" ></i>
<i class="fa fa-star-o rating-fill rating-md"></i>
<i class="fa fa-star-o rating-fill rating-md"></i>
</span>
<!-- Large sized ratings -->
<span class="ratings">
<i class="fa fa-star-o rating-fill rating-lg"></i>
<i class="fa fa-star-o rating-fill rating-lg"></i>
<i class="fa fa-star-o rating-fill rating-lg" ></i>
<i class="fa fa-star-o rating-fill rating-lg"></i>
<i class="fa fa-star-o rating-fill rating-lg"></i>
</span>
<span class="ratings">
<i class="fa fa-star rating-fill rating-check rating-lg"></i>
<i class="fa fa-star rating-fill rating-check rating-lg" ></i>
<i class="fa fa-star rating-fill rating-check rating-lg"></i>
<i class="fa fa-star-half-full rating-fill rating-check rating-lg"></i>
<i class="fa fa-star-o rating-fill rating-check rating-lg"></i>
<p class="rating-fill">& up</p>
</span>
<span class="ratings">
<i class="fa fa-thumbs-o-down rating-fill rating-lg"></i>
<i class="fa fa-smile-o rating-fill rating-lg" ></i>
<i class="fa fa-thumbs-o-up rating-fill rating-lg"></i>
<i class="fa fa-heart-o rating-fill rating-lg"></i>
</span>