web-dev-qa-db-ja.com

Fontawesome 5 Unicode

フォントの素晴らしい5つ星アイコンには<i class="fas fa-star"></i>および<i class="far fa-star"></i>違いはfas , farと両方のUnicodeはf005今、私は評価システムとしてそれを使いたいです。最初は通常の星で、クリックすることで固体の星になりますが、CSSでこのfasfarをどのように定義しますか？

コード

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;
}

上記のコードでは、スターのみが表示されます

cssunicodefont-awesomefont-awesome-5
8
mafortis

regularとsolidバージョンの違いは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.8.1/css/all.css">

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

関連する別の質問があります Font Awesome 5-擬似要素で使用すると空白の四角が表示されるのはなぜですか？ 詳細.

21
Temani Afif

非アクティブ/デフォルト状態のときにどのタイプの星が欲しいかを100％確信できないので、中空の星が必要だと推測しました。 font-weightを400または900との間で変更することにより、FA5アイコンの外観を劇的に変更できます。デモの重要なコメントに星を付けました。残りの変更は、text-shadows、:hoverの2ウェイtransitionsなどのオプションのその他のスタイルです。オプションですが、実際のチェックボックスを非表示にしてラベルを使用することをお勧めします審美的に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>
2
zer00ne

また、f005無地の星、FontAwesomeにはUnicode f006これは空の星です。これは、少なくとも私が使用しているバージョンでは当てはまります。

0
jfunk