Font Awesome-Symbole funktionieren nicht, ich habe alle erforderlichen Dateien eingebunden

Question

Ich versuche, Font Awesome-Symbole der Version 4.1.0 auf meiner Webseite zu verwenden, aber sie funktionieren nicht. Ich habe sie im head meiner Seite referenziert.

Ich habe zwei Methoden ausprobiert.

1. [Holen Sie sich ein KOSTENLOSES Angebot](#)

2. [Zuhause](index.html)

Hier ist der CDN-Link, den ich verwende:

Hier ist der vollständige HTML-Code:

        Retrica

                            Holen Sie sich ein KOSTENLOSES Angebot 

                                Zuhause
                                 Kontaktieren Sie uns

            Jetzt registrieren

Answer 1

Nur einige zusätzliche Informationen zu den obigen Antworten im Zusammenhang mit dem Update von Fontawesome hinzufügen,

Wenn Sie Font Awesome 5 verwenden,

a. kopieren Sie einfach den untenstehenden HTML-Code und fügen ihn ein,

Hinweis: Es ist besser, alle Ihre Skripte innerhalb des {IHR_SKRIPT_HIER} zu platzieren und kurz vor dem (IHREM_SCHLIESSENDEN_BODY).

b. Und zum Beispiel,

Answer 2

Sie müssen https für maxcdn.bootstrapcdn.com verwenden. Nur https auf maxcdn unterstützt CORS

Answer 3

Notizen

Diese Antwort wurde erstellt, als die neueste Version von fontawesome v5.* war, aber die yarn und npm Version zeigt auf v4.* (21.06.2019). Mit anderen Worten, die über Package-Manager installierten Versionen sind hinter der neuesten Veröffentlichung zurück!

Wenn Sie font-awesome über einen Package-Manager (yarn oder npm) installiert haben, achten Sie darauf, welche Version installiert wurde. Alternativ, wenn Sie font-awesome schon vor langer Zeit installiert haben, überprüfen Sie, welche Version installiert wurde.

Installation von font-awesome als neue Abhängigkeit:

$ yarn add font-awesome
success Lockdatei gespeichert.
success 1 neue Abhängigkeit gespeichert.
info Direkte Abhängigkeiten
 font-awesome@4.7.0
info Alle Abhängigkeiten
 font-awesome@4.7.0
Erledigt in 3,32s.

Überprüfen, welche Version von font-awesome bereits installiert ist:

$ yarn list font-awesome
yarn list v1.16.0
Warnung: Die Filterung durch Argumente ist veraltet. Verwenden Sie stattdessen die Pattern-Option.
 font-awesome@4.7.0
Erledigt in 0,79s.

Problem

Nachdem Sie die font-awesome-Abhängigkeit installiert haben, binden Sie eine dieser beiden Quelldateien font-awesome.css oder font-awesome.min.css (zu finden in node_modules/font-awesome/css/) in den Header Ihrer Webseite ein z.B.

Anschließend besuchen Sie https://fontawesome.com/. Sie wählen kostenlose Symbole aus und suchen nach dem Anmelden-Symbol (als Beispiel). Sie kopieren das Symbol z.B. , fügen es in Ihren HTML-Code ein und es wird nicht angezeigt oder erscheint als Quadrat oder Rechteck!

Lösung

Im Wesentlichen sind die über Package-Manager installierten Versionen hinter der Version zurück, die auf der https://fontawesome.com/ Webseite angezeigt wird. Wie Sie sehen können, haben wir font-awesome v4.7.0 installiert, aber die Webseite zeigt die Dokumentation für font-awesome v5.*. Die Lösung besteht darin, die Webseite zu besuchen, die Symbole für v4.7.0 dokumentiert https://fontawesome.com/v4.7.0, das entsprechende Symbol zu kopieren z.B. und es in Ihren HTML-Code einzufügen.

Answer 4

Für Version 5:

Wenn Sie das kostenlose Paket von dieser Seite heruntergeladen haben:

https://fontawesome.com/download

Die Schriftarten befinden sich in der Datei all.css und all.min.css.

Ihr Verweis wird also so ähnlich aussehen:

Die fontawesome.css Datei enthält keinen Schriftartverweis.

Answer 5

Ich habe dieses Problem gelöst, indem ich das Fonts-Verzeichnis auf der gleichen Ebene wie meine CSS-Dateien platziert habe.