Потрясающий шрифт 4,7 до 5 сломан? - PullRequest
Новая
       33

Потрясающий шрифт 4,7 до 5 сломан?

0 голосов
/ 15 марта 2020

Прощайте, я новичок в css, не говоря уже о fontawesome :-) Я хотел иметь хороший набор рейтинговых звезд 0-5, и мне это удалось вроде , используя 4.7

https://jsfiddle.net/BoxRec/p3zgeLbt/36

content: "\f005\f006\f006\f006\f006";

Однако мне нужно было пол-звезды, чтобы завершить внешний вид, и это потребовало невероятного 5

https://jsfiddle.net/BoxRec/p3zgeLbt/38

content: "\f005\f089\f006\f006\f006";

Итак, я использовал библиотеку 5, и теперь у меня теперь есть полузвезда \ f5c0, но полная звезда \ f005 отображается так же, как пустая звезда \ f006

https://jsfiddle.net/BoxRec/p3zgeLbt/46/

content: "\f005\f5c0\f006\f006\f006";

1 Ответ

0 голосов
/ 16 марта 2020

Если вы go к шпаргалке , вы можете увидеть, что \f006 пропал в FontAwesome 5. Я бы (не css парень) просто использовал before и after теги, чтобы сделать тот же эффект. Обычный против solid просто меняет вес шрифта.

обратите внимание, что я изменил семейство шрифтов на 'Font Awesome\ 5 Free'

i.star {
  font-family: 'Font Awesome\ 5 Free';
  font-size: 16px;
  color: #ffaa00;
  font-style: normal;
}

i.s1::before {
  content: "\f005";
  font-weight: 900;
}
i.s1::after {
  content: "\f005\f005\f005\f005";
  font-weight: 200;
}
i.s1-5::before {
  content: "\f005\f5c0";
  font-weight: 900;
}
i.s1-5::after {
  content: "\f005\f005\f005";
  font-weight: 200;
}

Пришлось добавить это к HTML: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
...