Heim > Web-Frontend > CSS-Tutorial > Wie kann man mit Unicode zwischen regulären und einfarbigen Awesome 5-Symbolen unterscheiden?

Wie kann man mit Unicode zwischen regulären und einfarbigen Awesome 5-Symbolen unterscheiden?

Barbara Streisand
Freigeben: 2024-10-24 10:39:29
Original
468 Leute haben es durchsucht

How to Distinguish Between Regular and Solid Font Awesome 5 Icons with Unicode?

Font Awesome 5 Unicode: Den Unterschied zwischen fas und far verstehen

In Font Awesome 5 werden die Symbole „fa-star“ und „far fa-star“ verwendet unterschiedliche Schriftstärken, um durchgehende bzw. normale Sternsymbole zu erstellen. Beide Symbole teilen sich den Unicode-Codepunkt „f005“.

Im bereitgestellten CSS-Code ist die Diskrepanz zwischen normalen und durchgezogenen Sternen auf die inkonsistenten Schriftstärken zurückzuführen. Um zwischen der regulären und der einfarbigen Version zu wechseln, passen Sie die Eigenschaft „font-weight“ in Ihrem Stylesheet an:

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

label.star:before {
  /* Regular star */
  font-weight: 200;
}</code>
Nach dem Login kopieren

Mit einer Schriftstärke von 200 für die reguläre Version und 900 für die einfarbige Version können Sie dies jetzt dynamisch tun Wechseln Sie je nach Benutzereingabe zwischen den beiden Sterndarstellungen.

Das obige ist der detaillierte Inhalt vonWie kann man mit Unicode zwischen regulären und einfarbigen Awesome 5-Symbolen unterscheiden?. 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