2013-09-30 7 views
8

Ich weiß, dass es viele andere ähnliche Probleme gibt, aber meins scheint keines der Kriterien der anderen Probleme zu erfüllen.Boootstrap glyphicons Firefox Probleme

Meine Bootstrap 3 Glyphicons funktionieren für jeden Browser außer Firefox. In Firefox werden sie als seltsame Symbole angezeigt. Das gleiche Problem ist bekannt, wenn man die Glyphicons aus einem CDN bedient, aber das ist nicht mein Problem, da ich lokal gehostete Font-Dateien verwende. Außerdem habe ich bereits sichergestellt, dass meine Dateien nicht beschädigt sind.

Hier ist mein Code.

<head> 
    <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap-style.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="/assets/css/style.css" /> 
</head> 

Der Code für die glyphicon:

<span class="glyphicon glyphicon-list-alt section-icon"></span> 

ich bereits sichergestellt haben, dass meine Dateien angemessen behandelt werden und sichergestellt, dass meine Cache löschen. Ich kann nicht sagen, was ich hier vermisse. Vorschläge?

Antwort

8

Ich hatte dieses Problem, sondern dient Bootstrap css von CDN gelöst es für mich:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
+0

YESSS.Das löst mein Problem! – thangcao

15

Firefox hat eine strenge Einstellung (this), die verhindert, dass Ihre HTML-Datei auf Ihre Webfonts von Ordnern zugreifen kann, die sich nicht im Root befinden. Dies geschieht nur, wenn Sie lokal arbeiten und nicht von Dateien auf einem Server. Sie haben eine Einstellung in Firefox zu ändern, um die glyphicons anzuzeigen, wenn Sie lokal entwickeln.

-open "about: config" in die Adress in firefox

-Dann Suche nach "security.fileuri.strict_origin_policy" Eigenschaft und ändern Sie es von "true" auf "false".

+2

ich auf demselben Server auf dem Server mit den Schriftarten bin deving. –

+1

Das gleiche Problem hier. Hast du eine Lösung dafür? –

+2

Aus der Perspektive eines Entwicklers können Sie sich nicht darauf verlassen, dass Benutzer dies herausfinden. Die Lösung muss passiv sein, nicht am Ende des Benutzers aktiv sein. – ahnbizcad

3

Es dauerte eine Weile, dies und mein Problem zu lösen sein könnte von anderen unterscheidet (Anführungszeichen natürlich ignorieren), da es populäre Antworten gibt, die einfach nicht für mich arbeiten. Das liegt daran, dass mein Problem und meine Lösung mit Amazon S3 zu tun haben. Also, wenn Sie S3 verwenden, lesen Sie weiter.

Das Problem ist die CORS (Cross-Origin Resource Sharing) -Konfiguration. Hier ist, wie es lösen:

Melden Sie sich in Ihrem S3 und öffnen Sie den Eimer Sie das Problem mit haben. Klicken Sie auf "Eigenschaften" und dann auf "Berechtigungen". Klicken Sie im Dropdown-Menü auf "Bearbeiten der CORS-Konfiguration". Es wird ein Fenster mit dem Code in einem Kasten Pop-up, das wie folgt aussieht:

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

diese Zeile löschen:

<AllowedHeader>Authorization</AllowedHeader> 

speichern und aktualisieren Sie Ihren Firefox-Seite. Deine Icons sollten jetzt erscheinen!

Werfen Sie einen Blick auf diese Links für weitere Informationen, wie sie mir das geholfen zu lösen: here und here und here. Wenn jemand einen besseren Einblick in bieten kann, warum das funktioniert, bitte!

+0

Ich verwende nicht S3, also ist dies definitiv nicht das Problem mit meiner Konfiguration. Trotzdem danke! –