Как настроить рейтинг на сайте с помощью иконок fonavesome

[Dimstrik 1]

Всем привет!

Подскажите мне кто сможет. Я решил реализовать рейтинг на сайте звёздами, только в замен картинок хочется взять шрифтовые иконки http://fontawesome.ru/ 

Вроде сделал иконки показываются и ховер эффект устраивает, но как сделать что бы звёзды были закрашены в активном виде. тоесть если оценка фильма 7.7 допустим то такая часть звёзд была закрашена.

С картинками нет проблем но хочется настроить с помощью иконок.

 Мой сайт https://ver-pelis.ru/

 

Вот стили 

.unit-rating {overflow: hidden; padding-left: 10px;}
.unit-rating .star { color: #bbbbbb; transition: all .25s; display: inline-block;font-size: 24px; transition: all .2s; margin-bottom: 0;}
.unit-rating .star:hover {color:#ff6600; transform: rotate(-15deg) scale(1.3);}
.unit-rating span.current-rating {position: absolute; height: 0; display: block; text-indent: -9000px; z-index: 1; color:#ff6600;  display: inline-block;}