Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie verwende ich Unicode für Font Awesome 5-Sterne-Symbole mit den Klassen „far' und „fas'?

Patricia Arquette
Freigeben: 2024-10-24 10:10:02
Original
803 Leute haben es durchsucht

How to Use Unicode for Font Awesome 5 Star Icons with 'far' and 'fas' Classes?

Unicode für Font Awesome 5 Star Icons: Verwendung der Klassen „far“ und „fas“

Font Awesome 5 bietet sowohl Regular als auch Solid Sternsymbole, dargestellt durch die Unicode-Werte „f005“ für beide. Um diese Variationen in Ihrem Bewertungssystem zu nutzen, können Sie CSS nutzen, um zwischen den Klassen „far“ und „fas“ umzuschalten.

Die Klasse „fas“ stellt den durchgezogenen Stern dar, während „far“ den regulären Stern darstellt . Der Schlüssel zum Wechsel zwischen ihnen liegt in der Anpassung der Schriftstärke. Indem Sie die Schriftstärke auf 900 für den markierten Stern und 200 für den nicht markierten Stern festlegen, können Sie mühelos zwischen der einfarbigen und der regulären Version wechseln.

Hier ist ein aktualisierter Codeausschnitt, der dies berücksichtigt:

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

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

Dieser Code stellt sicher, dass das Sternsymbol regelmäßig ist, wenn es nicht aktiviert ist, und durchgehend, wenn es aktiviert ist, sodass Sie ganz einfach ein dynamisches und interaktives Bewertungssystem erstellen können.

Das obige ist der detaillierte Inhalt vonWie verwende ich Unicode für Font Awesome 5-Sterne-Symbole mit den Klassen „far' und „fas'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage