I Glyphicon Bootstrap 3 non funzionano

Ho scaricato Bootstrap 3.0 e non riesco a far funzionare i glyphicon. Ottengo qualche tipo di errore “E003”. Qualche idea per cui questo sta accadendo? Ho provato sia localmente che online e ho ancora lo stesso problema.

Stavo avendo lo stesso problema e non riuscivo a trovare alcuna informazione su di esso tranne nei commenti nascosti su questa pagina. I miei file di carattere si stavano caricando perfettamente secondo Chrome, ma le icone non venivano visualizzate correttamente. Sto facendo una risposta così speriamo che possa aiutare gli altri.

Qualcosa non andava con i file di font che ho scaricato dallo strumento di personalizzazione di Bootstrap 3. Per ottenere i caratteri corretti, vai alla homepage di Bootstrap e scarica il file .zip completo. Estrai i quattro file di font da lì nella tua directory di caratteri e tutto dovrebbe funzionare.

Nota per i lettori: assicurati di leggere il commento di @ user2261073 e la risposta di @ Jeff relativa a un bug nel customizer. È probabilmente la causa del tuo problema.


Il file del font non viene caricato correttamente. Controlla se i file si trovano nella posizione prevista.

@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

Come indicato da Daniel, potrebbe anche essere un problema di mimetype. Gli strumenti di sviluppo di Chrome mostrano i font scaricati nella scheda di rete:

download di font scheda di rete chrome

Nel mio caso stavo ottenendo un 404 per glyphicons-halflings-regular.woff e glyphicons non visibili sui browser mobili.

Sembra che ci sia una certa confusione sul tipo MIME per woff, più di un tipo MIME viene accettato da diversi browser, ma il W3C dice :

 application/font-woff 

Modifica: dopo aver testato il seguente tipo MIME per woff funziona su tutti i browser attualmente:

 application/x-font-woff 

Modifica: L’ultima versione di Bootstrap in questo momento (3.3.5) usa i font .woff2 con lo stesso risultato iniziale di .woff, il W3C che ancora definisce le specifiche ma al momento il tipo MIME sembra essere:

 application/font-woff2 

-Se hai seguito la risposta più votata e non funziona ancora :

La cartella Font DEVE essere allo stesso livello della cartella CSS. La correzione del percorso in bootstrap.css non funzionerà.

Bootstrap.css deve navigare nella cartella Fonts esattamente come questo:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } 

Se le altre soluzioni non funzionano, potresti provare a importare Glyphicon da un’origine esterna, invece di affidarti a Bootstrap per fare tutto per te. Per fare questo:

Puoi farlo in HTML:

  

O CSS:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css") 

Credito a edsiofi da questa discussione: Bootstrap 3 Glyphicons CDN

Stavo guardando attraverso questa mia vecchia domanda e dal momento che quella che doveva essere la risposta corretta fino ad ora, è stata data da me nei commenti, penso che anch’io meriti il ​​merito.

Il problema riguardava il fatto che i file di font glyphicon scaricati dallo strumento di personalizzazione di bootstrap non erano gli stessi di quelli scaricati dal reindirizzamento trovato nella homepage di bootstrap. Quelli che stanno lavorando come dovrebbero sono quelli che possono essere scaricati dal seguente link:

 http://getbootstrap.com/getting-started/#download 

Chiunque abbia problemi con i vecchi file di personalizzazione sbagliati dovrebbe sovrascrivere i caratteri dal link sopra.

I siti Web di Azure mancano della configurazione MIME woff . È necessario aggiungere la seguente immissione in web.config

        

Come descritto da @Stijn, la posizione predefinita in Bootstrap.css non è corretta quando si installa questo pacchetto da Nuget .

Cambia questa sezione per assomigliare a questa:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('Content/fonts/glyphicons-halflings-regular.eot'); src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

IIS non .woff server .woff file per impostazione predefinita, quindi in IIS sarà necessario aggiungere una voce al file web.config ;

         

Ho modificato il mio file less variables.less ho modificato la variabile

 @icon-font-path: "fonts/"; 

l’originale era

 @icon-font-path: "../fonts/"; 

Stava causando un problema

Nel caso in cui qualcun altro finisse qui e usasse Bootstrap> = v4.0: il supporto glyphicon viene eliminato

La parte rilevante dalle note di rilascio:

Dropped il carattere dell’icona Glyphicons. Se hai bisogno di icone, alcune opzioni sono:

la versione upstream di Glyphicons

Octicons

Font Awesome

Fonte: https://v4-alpha.getbootstrap.com/migration/#components

Se si desidera utilizzare i glyphicon è necessario scaricarlo separatamente.

Personalmente ho provato Font Awesome ed è abbastanza buono. L’aggiunta di icone è simile alla modalità glypicon:

  

Ciò è dovuto alla codifica errata in bootstrap.css e bootstrap.min.css. Quando scarichi Bootstrap 3.0 dal Customizer manca il seguente codice:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

Poiché questo è il codice principale per l’uso di Glyphicon, non funzionerà in questo modo …

Scarica i file css dal pacchetto completo e questo codice verrà implementato.

Hai tutti i seguenti file nella tua directory di caratteri

 glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 

Un altro problema / soluzione potrebbe avere questo codice Bootstrap 2.x:

  

e durante la migrazione in base alla guida ( .icon-* ---> .glyphicon .glyphicon-* ):

  

ti dimentichi di aggiungere la class di icone (contenente il riferimento del font):

  

Di seguito è ciò che ha risolto per me. Stavo ricevendo l’errore “URI errato” usando la console di Firebug. Le icone apparivano come numeri E ###. Ho dovuto aggiungere un file .htaccess nella mia directory ‘fonts’. Header set Access-Control-Allow-Origin "*" Possibile duplicato di: font scaricabile su firefox: URI errato o accesso cross-site non consentito

Questo è stato il motivo, perché le icone non si sono mostrate per me:

 * { arial, sans-serif !important; } 

Dopo aver rimosso questa parte del mio CSS , tutto ha funzionato come dovrebbe. L’importante era quello che causava problemi.

Questa è una ripresa molto lunga, ma è stato il mio caso e poiché non è già qui.

Se stai compilando Twitter Bootstrap da SASS usando gulp-sass o grunt-sass ie. node-sass . Assicurati che i tuoi moduli di nodo siano aggiornati, specialmente se stai lavorando su un progetto piuttosto vecchio.

Si scopre che da qualche tempo la direttiva SASS @at-root viene usata nella definizione di @font-face nei glyphicon, vedere https://github.com/twbs/bootstrap-sass/blob/b01ab4942233737316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss .

Il gotcha qui è quel node-sass ie. libsass non supporta la direttiva @at-root se è troppo vecchia. Se questo è il caso, otterrai @font-face racchiuso in un @at-root che il browser non ha idea di cosa fare. Il risultato è che nessun font verrà scaricato e probabilmente vedrai spazzatura invece di icone.

Nota: di seguito è probabile uno scenario di nicchia, ma volevo condividerlo nel caso in cui qualcun altro potesse trovarlo utile.

In un progetto di rotaie, stiamo riutilizzando un po ‘attraverso una gem che è un motore Rails che utilizza bootstrap-sass . Tutto andava bene nel progetto principale con l’eccezione della risoluzione del percorso del font glyphicon.

 GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Abbiamo scoperto che $bootstrap-sass-asset-helper era false durante la risoluzione quando ci aspettavamo che fosse vero, quindi il percorso era diverso.

Abbiamo causato l’inizializzazione del $bootstrap-sass-asset-helper nel motore gem facendo:

 // explicit sprockets import to get glyphicon font paths correct @import 'bootstrap-sprockets'; @import "bootstrap/variables"; 

ad esempio questo ha causato il percorso da risolvere in:

 /assets/bootstrap/glyphicons-halflings-regular.woff 

Di nuovo, questo non dovrebbe essere necessario in nessun progetto di rotaie normale usando bootstrap-sass , stiamo solo riutilizzando molte viste e questo ha funzionato per noi. Spero che questo possa aiutare qualcun altro.

Ecco cosa dice la documentazione ufficiale per quanto riguarda i caratteri non il rendering.

Modifica della posizione del carattere dell’icona Bootstrap presuppone che i file dei font dell’icona si trovino nella directory ../fonts/, relativa ai file CSS compilati. Spostare o rinominare i file dei font significa aggiornare il CSS in uno dei tre modi seguenti: Modificare il simbolo @ icona-font-path e / o @ icona-font-name nei file Less sorgente. Utilizza l’opzione relativa agli URL fornita dal compilatore Less. Cambia i percorsi url () nel CSS compilato. Usa qualsiasi opzione che meglio si adatta alla tua specifica configurazione di sviluppo.

Oltre a ciò potrebbe essere che ti sei perso per copiare la cartella dei caratteri nella directory principale

Ho avuto questo problema ed è stato causato dal file variables.less. Sovrascriverlo per impostare il valore del percorso del font con l’icona ha risolto il problema.

Il file strutturato ha questo aspetto:

 \Content \Bootstrap \Fonts styles.less variables.less 

Aggiungendo il mio proprio file variables.less nella radice del contenuto e facendo riferimento a questo in styles.less ha risolto l’errore 404.

Variables.less contiene:

 @icon-font-path: "fonts/"; 

Ho ottenuto Bootstrap da NuGet. Quando ho pubblicato il mio sito, i glifi non hanno funzionato.

Nel mio caso ho funzionato impostando l’azione di compilazione per ciascuno dei file dei font su “Contenuto” e impostandoli su “Copia sempre”.

Ad esempio, assicurati di non aver specificato la famiglia di caratteri

 *{font-family: Verdana;} 

rimuoverà il font halfling da elementi.

Stavo avendo lo stesso problema in cui il browser non era in grado di trovare i file dei font, e il mio problema era dovuto alle esclusioni nel mio file .htaccess che stava whitelist i file che non dovrebbero essere inviati a index.php per l’elaborazione. Poiché non è stato ansible caricare il file del font, i caratteri sono stati sostituiti con BLOB.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

Come puoi vedere, i file come immagini, rss e xml sono esclusi dalla riscrittura, ma i file dei font sono file .woff e .woff2 , quindi è necessario aggiungere alla whitelist.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

L’aggiunta di woff e woff2 alla whitelist consente di caricare i file di font e i glyphicon dovrebbero quindi essere visualizzati correttamente.

Devi impostare secondo questo ordine:

   

Ciò che ha funzionato per me è stato la sostituzione di percorsi da:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

a

 @font-face { font-family: 'Glyphicons Halflings'; src: url('/assets/glyphicons-halflings-regular.eot'); src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } 

avevo un codice \ e094 di larghezza della casella per glyphicon-arrow-down, infatti ho risolto il problema aggiungendo glyphicon in class css in questo modo:

  

se potesse aiutare qualcuno …

Ecco come si include l’icona in bootstrap 3

  

http://glyphicons.bootstrapcheatsheets.com/

Spero possa aiutare.

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');} 

Sto usando bootstrap con namespace e glyphicon che non funzionano, ma dopo aver aggiunto la riga sopra nel codice, i glyphicon funzionano bene.

Ho appena rinominato il carattere da bootstrap.css usando Ctrl + c, Ctrl + v e ha funzionato.

Devi impostare secondo questo ordine: