Verwendung von Font Awesome v5.7.2 mit HTML

Font Awesome ist eine der beliebtesten Möglichkeiten, Ihrer Website Symbole hinzuzufügen. Aber was ist, wenn Sie das CDN zum Element Ihrer Seite hinzufügen und nur schwarze Rechtecke sehen?

Hier sind einige Dinge zu beachten, wenn Sie Ihrem nächsten Projekt Font Awesome hinzufügen.

Fügen Sie den Link zum Kopf hinzu

Stellen Sie sich vor, Sie haben folgenden HTML-Code:

Wie bei anderen CDNs müssen Sie dem Element ein Element hinzufügen . Für Font Awesome 5.7.2 sieht es ungefähr so ​​aus:

Online gegen lokal

Wenn Sie den folgenden Code in einem webbasierten Editor wie CodePen oder CodeSandbox ausführen, werden die Symbole durch den folgenden Code ordnungsgemäß dargestellt:

Wenn Sie jedoch versuchen, die Seite lokal in einem Browser zu öffnen, werden weiterhin die schwarzen Rechtecke anstelle der Symbole angezeigt:

Schauen Sie sich das hrefim obigen Element noch einmal an. Siehst du es?

Das Problem ist, dass der Browser beim Laden der Seite aus Ihrem lokalen Dateisystem versucht, die CSS-Datei Font Awesome im Stammverzeichnis des Dateisystems zu finden.

Um die Dinge online und lokal zum Laufen zu bringen, müssen Sie das URL-Schema (HTTP oder besser HTTPS) zu Folgendem hinzufügen href:

Was ist hier los?

Wenn Sie das URL-Schema ( href="//use.fontawesome...") weglassen, verwendet der Browser dasselbe URL-Schema, mit dem die Seite geladen wurde.

Wenn Sie die Seite also lokal ausführen, indem Sie die HTML-Datei in einem Browser ausführen, wird hrefdavon ausgegangen, dass das Font Awesome CSS auch eine Datei ist, die ebenfalls lokal gespeichert wird ( file:).

Stellen Sie einfach sicher, dass die hrefAttribute für Ihre Elemente alle auf die vollständige URL verweisen, einschließlich des URL-Schemas, und Sie sollten bereit sein.