FriconiX
Free collection of beautiful vector icons for your web pages.

HTML five stars ranking

How to create a 5 star ranking with icons from Friconix.

Five stars ranking in HTML

I selected the following star and half star icons from Friconix:

Stars and half stars selected from Friconix

You can simply have to join the stars to create the ranking you expect:

<div>
<i class="fi-xnsuxl-star-solid"></i>
<i class="fi-xnsuxl-star-solid"></i>
<i class="fi-xnsuxl-star-solid"></i>
<i class="fi-xwluxl-star-half-wide"></i>
<i class="fi-xwluxl-star-wide"></i>
</div>

Resultat sur JSFiddle

See also


Last update : 04/12/2020