Heim > Web-Frontend > CSS-Tutorial > Wie legt man die Schriftfamilie für Font Awesome 5-Symbole in CSS-Pseudoelementen richtig fest?

Wie legt man die Schriftfamilie für Font Awesome 5-Symbole in CSS-Pseudoelementen richtig fest?

Patricia Arquette
Freigeben: 2024-12-14 19:26:11
Original
474 Leute haben es durchsucht

How to Properly Set the Font-Family for Font Awesome 5 Icons in CSS Pseudo-elements?

Auswahl der richtigen Schriftfamilie für Font Awesome 5-Pseudoelemente

Bei der Verwendung von Font Awesome-Symbolen innerhalb von CSS-Pseudoelementen ist dies der Fall Es ist wichtig, die richtige Schriftfamilie auszuwählen, um sicherzustellen, dass die Symbole richtig angezeigt werden. Wie Sie festgestellt haben, kann die Verwendung einer falschen Schriftfamilie dazu führen, dass das Symbol nicht angezeigt wird.

Mehrere Schriftarten in der Font-Family-Eigenschaft

Die Lösung liegt in der Verwendung mehrere Schriftarten in der Eigenschaft „font-family“. Auf diese Weise sucht der Browser in jeder angegebenen Schriftfamilie nach dem Symbol, bis er eine Übereinstimmung findet. In diesem Fall könnten Sie Folgendes verwenden:

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
Nach dem Login kopieren

Schriftfamilie für solide und reguläre Symbole

Im Gegensatz zu Ihrer Annahme die Schriftfamilie für beide Bei soliden und regulären Symbolen handelt es sich um „Font Awesome 5 Free“, nicht um „Font Awesome 5 Solid“. Der Unterschied zwischen festen und regulären Symbolen liegt in ihrer Schriftstärke, nicht in ihrer Schriftfamilie.

Kostenlose vs. PRO-Symbole

Sie haben auch bemerkt, dass nicht alle regelmäßig sind Symbole sind kostenlos. Einige sind im PRO-Paket von Font Awesome enthalten. Wenn ein Symbol nicht angezeigt wird, überprüfen Sie daher noch einmal seine Verfügbarkeit im kostenlosen Plan.

Beispielcode

Um die korrekte Verwendung zu veranschaulichen, betrachten Sie das folgende Beispiel:

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon1:before {
  content: "\f099"; /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
Nach dem Login kopieren
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie legt man die Schriftfamilie für Font Awesome 5-Symbole in CSS-Pseudoelementen richtig fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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