2015-02-21 9 views
8

Sto usando bootstrap in Django e funziona perfettamente per tutte le altre classi di bootstrap tranne classi un'icona come: class="glyphicon glyphicon-download-alt"Bootstrap Glyphicons non il rendering utilizzando locale versione Bootstrap

Snapshot con l'errore in basso a destra:

enter image description here

Snapshot quando il file bootstrap.min.css inclusi:

enter image description here

Sul fare ispezionare elemento che contiene tutte le glyphicons sua istantanea è-

enter image description here

Funziona solo se collego http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css nel mio file html; ma non funziona se includo il mio bootstrap.min.css dal mio PC. Altrimenti, ogni classe di bootstrap funziona perfettamente. Spero tu capisca il mio problema. Grazie in anticipo.

+0

Cosa intendi con incluso dal tuo PC? Stai costruendo localmente? In tal caso, si prega di testare anche la pagina in Chrome per vedere se lo stesso errore si verifica come in Firefox. In realtà non deve essere Chrome, ma almeno un browser non basato su Mozilla. – skribe

+0

Non ho scaricato dal link sopra e salvato nel mio PC e funziona perfettamente per tutte le classi di bootstrap –

+1

Hai scaricato anche il font glyphicons? –

risposta

21

Non funziona perché è stato salvato il file CSS dal collegamento CDN. Ciò non funzionerà, perché i glyphicon sono collegati a un file CSS. Esempio:

@font-face{ 
    font-family:'Glyphicons Halflings'; 
    src:url(../fonts/glyphicons-halflings-regular.eot); 
} 

Ciò significa, è che il file scaricato Bootstrap sta cercando i glyphicons in una cartella sul computer (che non abbiamo).

È necessario scaricare correttamente Bootstrap da the official download link. Questo download ufficiale contiene una directory /fonts/ che contiene i file di carattere glyphicon effettivi.

In alternativa, è possibile modificare tutti i percorsi dei caratteri nel file CDN in modo che siano i collegamenti assoluti ai caratteri sulla CDN ... ma ciò non ha molto senso.

+0

L'ho provato ma continua a non funzionare. La sua istantanea contiene tutti i file Glyphicons. Aiuto Plz. –

+1

Se scarichi lo zip ufficiale, funzionerà immediatamente. L'unico modo in cui non lo è è se si sposta qualcosa senza modificare i collegamenti relativi. – rnevius

+0

Attualmente sto lavorando in django e copio solo file css nella mia cartella statica e funziona per altre classi. Dimmi anche che cos'è il CDN. Grazie –

0

Finalmente il mio problema è risolto. In realtà il problema è stato durante l'utilizzo di Glyphicons nel nostro sito come in django, dobbiamo anche copiare la cartella dei font dalla cartella bootstrap-3.3.2-dist scaricata da bootstrap official link

Un altro problema è dove sistemarlo. Vedi questa struttura dove i font sono rispetto al file css e quindi incolla la cartella dei font.

 
bootstrap/ 
├── less/ 
├── js/ 
├── fonts/ 
├── dist/ 
│ ├── css/ 
│ ├── js/ 
│ └── fonts/ 
└── docs/ 
    └── examples/ 

Ma ha funzionato per me in django solo nella cartella statica.

+0

Penso che il semplice passaggio del tuo bootstrap.min.css con quello contenuto nel dist risolve il problema. – Mathieu