Wie kann ich das 5-Sterne-Symbol „Font Awesome' mithilfe von CSS anpassen?

Font Awesome 5-Sternsymbol mit CSS anpassen

In Font Awesome 5 gibt es das Sternsymbol in zwei Varianten: fas (durchgezogen) und weit (normal). Diese Variationen können durch ihren Unicode-Wert (f005) unterschieden werden und können zum Erstellen eines Bewertungssystems verwendet werden, bei dem Sterne zunächst als Umrisse erscheinen und dann beim Klicken gefüllt werden.

Zum Definieren der einfarbigen und regulären Stile in CSS können Sie die Eigenschaft „font-weight“ verwenden. Wenn Sie den Wert auf 900 einstellen, können Sie die Sterne einfarbig machen, und wenn Sie ihn auf einen niedrigeren Wert (z. B. 200) einstellen, können Sie ihnen regelmäßige Umrisse verleihen.

<code class="css">input.star:checked ~ label.star:before {
  font-weight: 900;
}

label.star:before {
  font-weight: 200;
}</code>

Dieser Code passt die Schriftstärke entsprechend an davon, ob das Sternchen-Kontrollkästchen aktiviert ist oder nicht. Wenn das Kontrollkästchen aktiviert ist, wird der Stern durchgezogen, und wenn es nicht aktiviert ist, bleibt der Stern ein Umriss.

Beachten Sie, dass die Eigenschaft „font-family“ auf „Font Awesome 5 Free“ gesetzt sein sollte, um die Korrektheit sicherzustellen Symbole werden angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich das 5-Sterne-Symbol „Font Awesome' mithilfe von CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!