Шрифт Awesome 5 unicode

Значок Font Awesome с 5 звездами имеет <i class = "fas fa-star"></i> и <i class = "far fa-star"></i>, отличается от fas , far и Unicode для обоих - f005, теперь я хочу использовать его в качестве моей рейтинговой системы, где сначала обычная звезда, а при нажатии становится твердой звездой, но как мне определить этот fasfar в моем css?

Код

input.star:checked ~ label.star:before {
              content: '\f005';
              color: #e74c3c;
              transition: all .25s;
              font-family: 'Font Awesome 5 Free';
              font-weight: 900;
}


label.star:before {
          content: '\f005';
          font-family: 'Font Awesome 5 Free';
          font-weight: 900;
}

с моими кодами выше я получаю только твердую звезду

css unicode font-awesome font-awesome-5

11.04.2018 06:05

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

20 016

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Не уверен на 100%, какой тип звезды вам нужен, когда находится в неактивном состоянии / состоянии по умолчанию, поэтому предположил, что вам нужна полая звезда. Вы можете кардинально изменить внешний вид значков FA5, изменив font-weight на 400 или 900 и обратно. Я поставил звездочки рядом с важными комментариями в демо. Остальные изменения - это просто необязательные разные стили, такие как text-shadows, двусторонние transition на :hover и т. д. Хотя это необязательно, вы должны попытаться скрыть фактический флажок и просто использовать метку, это лучше эстетически IMO.

Демо

input.star {
  /*⭐} By using the label as the interface (button) this can be hidden*/
  display: none;
}

.star {
  color: rgba(255, 255, 255, 0);
  text-shadow: .25px -.25px 1px #000;
  transition: .2s ease;
}

.star:hover {
  cursor: pointer;
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

input.star:checked~label.star:hover {
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

label.star::before {
  content: "\f005";
  /*⭐} Optional but recommended */
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  /*⭐} By lowering the font-weight, the icon is an outline */
  font-weight: 400;
  font-size: 32px;
}

input.star:checked~label.star::before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

<link href = "https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel = "stylesheet">
<!------------{?} Follow this pattern so that the label acts as a
------------------ remote button to the hidden checkbox-->

<!--⭐} Set an #id on checkbox-->
<input id='lucky' class='star' type='checkbox'>

<!--⭐} Set a [for] attribute with the value of checkbox #id-->
<label for='lucky' class='star'></label>

11.04.2018 09:01

Ответ принят как подходящий

^{If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version}

Разница между версией обычный и твердый - это font-weight. Вам просто нужно настроить его, чтобы переключаться между обеими версиями:

input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
}

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

<input type = "checkbox" class = "star">
<label class = "star"></label>

Вот еще один связанный вопрос Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо значка для более подробной информации.

11.04.2018 10:28

Также стоит отметить, что помимо сплошной звезды f005, FontAwesome имеет юникод f006, который является пустой звездой. Это верно, по крайней мере, в той версии, которую я использую.

31.07.2018 21:50