Font-Awesome-Symbole werden nicht über BoostrapCDN gerendert

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

Frage

Ich versuche, über den BootstrapCDN-Link Font-Awesome-Symbolschriftarten zu verwenden, von denen ich ziemlich sicher bin, dass ich die neueste Version habe:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Ich habe diesen Link in die eingefügt <head> Teil meiner HTML-Datei und ich versuche, sie mit diesem einfachen HTML-Code zum Laufen zu bringen:

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>

Es wird jedoch nicht gerendert.Ich habe diesen Code in den neuesten Versionen von Firefox (27), Safari (7) und Chrome (33) ausprobiert.Ich habe das überprüft fa Die Klasse befindet sich auf jedem der Symbole, die ich aufrufen möchte, und auch auf dem fa- Im Gegensatz zum alten wird das Präfix verwendet icon- Präfix.Ich habe meine Implementierung des Codes mit diesem Video überprüft http://headwaythemes.com/using-font-awesome-with-headway/ (Obwohl für ein WordPress-Theme gedacht, sollte der Code im Prinzip genauso funktionieren) und habe mich nach Stapelüberlauf umgesehen, aber frühere Fragen wie Fontawesome lädt nicht haben mir bei der Lösung meines Problems keine Hilfe gebracht.

Ich habe die Datei „fontawesome.otf“ nicht installiert, aber das ist es sicherlich nicht, wenn ich die Glyphen beim Besuch sehen kann http://fortawesome.github.io.
Sollte ich einfach die Font-Awesome-Dateien herunterladen und zusammen mit meiner gesamten zukünftigen Website hosten, damit ich mir nicht auch um die Aktualisierung des BoostrapCDN-Links kümmern muss?- Auch wenn ich nur ein paar Icons verwenden möchte?

War es hilfreich?

Lösung

Der Grund dafür, dass es nicht geladen wird, liegt darin, dass der URI mit „//“ beginnt.Das bedeutet, dass es sich um einen protokollrelativen Pfad handelt, was bedeutet, dass das von der Seite verwendete Protokoll verwendet wird.Wenn Sie Ihr HTML lokal öffnen, wird es von Ihrem Browser verwendet Datei als Protokoll und versuche so, mit „file://“ auf das Font-Awesome-CSS zuzugreifen.Wenn Sie über einen lokalen oder Remote-HTTP-Webserver auf Ihre HTML-Datei zugreifen, greifen Sie auf die Seite über zu http Protokoll, also Zugriff auf das CSS mit „http://“.

Lösung:

  1. Ändern Sie den Pfad des CSS oder ahmen Sie ihn auf Ihrem lokalen Computer nach.
  2. Führen Sie einen lokalen oder Remote-HTTP-Server aus und greifen Sie auf die Seite zu.

Für mehr Information:URI beginnt mit zwei Schrägstrichen ...Wie verhalten sie sich?

Andere Tipps

Eine so einfachere Möglichkeit, damit umzugehen – fügen Sie einfach „http:“ vor der CDN-Zeile hinzu, und es funktioniert auf Ihrem lokalen Computer, d. h.so was:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Ta-daa!

Was Pulkit geantwortet hat, ist absolut richtig.Zum Hinzufügen: Wenn Sie schnell einen lokalen Server erstellen möchten, gehen Sie einfach in das Verzeichnis der HTML- und CSS-Seiten, gehen Sie dann zum Terminal und geben Sie Folgendes ein:

$python -m SimpleHTTPServer

Gehen Sie dann zu Ihrem Browser und gehen Sie zu 127.0.0.1:8000, wenn es nicht angezeigt wird. Ändern Sie die Homepage Ihrer Website auf index.html

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top