Warum werden meine Font Awesome-Symbole als Quadrate statt als Symbole angezeigt?

Font Awesome zeigt Symbole nicht wie erwartet an: Stattdessen erscheinen Quadrate

Die Integration von Font Awesome-Symbolen in Ihr Webdesign kann frustrierend sein, wenn Symbole so aussehen leere Quadrate. Dieses Problem tritt häufig aufgrund einer falschen Implementierung von Font Awesome-Klassen auf.

So binden Sie Font Awesome-Dateien ein

Der von Ihnen bereitgestellte HTML-Code enthält die erforderlichen CSS-Dateien für Font Großartig:

<link rel="stylesheet" href="css/font-awesome.css">

Fehler: Fehlende Klasse

Ihr Code verwendet eine unvollständige Symbolklasse:

<i class="icon-camera-retro"></i>

Um das Symbol korrekt anzuzeigen, benötigen Sie zwei Klassen: die fa-Klasse und die Klasse, die das Symbol angibt, z. B. fa-camera-retro.

Korrekte Implementierung

<i class="fa fa-camera-retro"></i>

Bootstrap 5 Update

In Bootstrap 5 ist das Präfix fa veraltet. Die neue Standardeinstellung ist fas (solider Stil) und fab (Markenstil):

<i class="fas fa-camera-retro"></i>  <!-- Solid icon -->
<i class="fab fa-twitter"></i>        <!-- Brand icon -->

Durch die Anwendung der richtigen Klassen werden Font Awesome-Symbole wie erwartet gerendert, wodurch die störenden Quadrate beseitigt werden, die Ihr Design zuvor behinderten .

Das obige ist der detaillierte Inhalt vonWarum werden meine Font Awesome-Symbole als Quadrate statt als Symbole angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!