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

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

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*/
}

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

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!