Перейти к публикации

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


Рекомендованные сообщения

Всем привет!

Подскажите мне кто сможет. Я решил реализовать рейтинг на сайте звёздами, только в замен картинок хочется взять шрифтовые иконки 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;}

 

 

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...