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

Für Suchende nach fehlenden Font-Awesome-Symbolen habe ich ein paar Ideen gesammelt:

• Vergewissern Sie sich, dass Sie einen korrekten Link zum CDN verwenden, wie zum Beispiel:

• Wenn Ihre Seite HTTPS verwendet, verlinken Sie dann die Font-Awesome-CSS über HTTPS (ersetzen Sie http:// durch https:// im obigen Link).

• Überprüfen Sie, ob AdBlock Plus oder uBlock aktiviert sind. Sie könnten einige der Symbole blockieren.

• Löschen Sie den Cache Ihres Browsers. (Bei Chrome klicken Sie lange auf den Aktualisieren-Button und wählen Sie Hard Cache Reset)

• Vergewissern Sie sich, dass das oder -Element, das Sie verwenden, die Schriftart FontAwesome verwendet. Zum Beispiel darf es nicht nur

  _sondern

  Nicht funktioniert es, wenn Sie etwas wie Folgendes in Ihrem CSS haben:

  * {
    font-family: 'Josefin Sans', sans-serif !important;   
  }_ 

  _* Verwenden Sie IE8, benutzen Sie ein HTML5-Shim?

• Wenn das nicht funktioniert, gibt es weitere Problembehebungs-Ideen im Font Awesome Wiki. _

Answer 2

Unter Ihrem Bezug haben Sie dies:

Speziell der Teil href=.

Jedoch unter Ihrem kompletten HTML ist dies:

Haben Sie versucht, src= durch href= in Ihrem vollständigen HTML zu ersetzen, um dies zu erhalten?

Funktioniert für mich: http://codepen.io/TheNathanG/pen/xbyFg

Answer 3

Zuerst konnte ich das nicht mit Font Awesome 5 zum Laufen bringen:

Deshalb kam ich hierher, da ich mit Font Awesome nicht vertraut bin. Als ich genauer hinschaute, bemerkte ich, dass mein Problem nur eine Angelegenheit der Version war.

w3schools hat mir in diesem Fall geholfen.

Neu in Font Awesome 5 ist das Präfix fas, Font Awesome 4 verwendet fa.

Das s in fas steht für solid, und einige Symbole haben auch einen regular Modus, der durch Verwendung des Präfix far spezifiziert ist.

Ich habe bereits die verschiedenen Dateien im FontAwesome CSS-Ordner bemerkt, wie:

• all.min.css
• brands.min.css
• fontawesome.min.css
• regular.min.css
• solid.min.css

Und da habe ich meinen Fehler bemerkt. Alles, was ich tun musste, war das entsprechende CSS im HTML einzubinden:

Und dann das richtige Element referenzieren:

Diese Konfiguration funktioniert für mich. Nicht alle Elemente haben jedoch Äquivalente in jedem Typ. Dies wird nicht funktionieren:

Als Anmerkung, wenn Sie nicht alle separaten Dateien referenzieren möchten, genügt dies:

Answer 4

Ich hatte das gleiche Problem, Icons werden im Quadrat angezeigt, habe wie in den Anweisungen hier angegeben versucht: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Gelöst durch Verwendung dieses Verweises im Kopfbereich der HTML-Seite

Answer 5

Meins hat nicht funktioniert, weil ich ein Symbol wollte, das in der FA-Version, die ich verwendet habe, nicht veröffentlicht wurde.

Das erklärt, warum einige Symbole angezeigt werden und andere nicht.

Ziemlich offensichtlich, aber ich denke, manche Leute tappen immer noch in diese Falle. Wie ich.