Wie verwende ich verschiedene Unicode-Sternsymbole in Font Awesome 5?

Font Awesome 5 Unicode-Sterne-Bewertungssystem: Normal vs. Solid

In Font Awesome 5 haben die regulären und soliden Sternsymbole unterschiedliche Unicode-Werte ( ), unterscheiden sich jedoch in ihrem Erscheinungsbild aufgrund ihrer Schriftstärke.

CSS-Code zum Austauschen von Sternversionen:

Um mithilfe von CSS einfach zwischen der regulären und der Vollsternversion zu wechseln Passen Sie die Schriftstärke an:

<code class="css">input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* Solid star */
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200; /* Regular star */
}</code>

Implementierung:

Um dieses Sternebewertungssystem zu verwenden:

1. Schließen Sie die Schriftart ein Tolle CSS-Datei:

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

2. Erstellen Sie eine Kontrollkästcheneingabe mit einer Sternklasse:

   <code class="html"><input type="checkbox" class="star"></code>

3. Fügen Sie eine Beschriftung mit einer Sternklasse hinzu weiter neben dem Kontrollkästchen:

   <code class="html"><label class="star"></label></code>

Mithilfe des CSS-Codes oben wird durch Klicken auf das Kontrollkästchen zwischen dem normalen Stern (Schriftstärke: 200) und umgeschaltet der durchgezogene Stern (Schriftstärke: 900).

Das obige ist der detaillierte Inhalt vonWie verwende ich verschiedene Unicode-Sternsymbole in Font Awesome 5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!