Bootstrap 3 Glyphicons non funziona

Ho scaricato bootstrap 3.0 e non riesco a far funzionare i glyphicons. Ottengo una sorta di errore "E003". Qualche idea sul perché questo stia accadendo? Ho provato sia localmente che online e ho ancora lo stesso problema.

Stavo riscontrando lo stesso problema e non sono riuscito a trovare alcuna informazione a riguardo tranne nei commenti nascosti in questa pagina. I miei file di font si stavano caricando bene secondo Chrome, ma le icone non venivano visualizzate correttamente. Sto facendo di questo una risposta in modo che possa aiutare gli altri.

Qualcosa non andava nei file dei caratteri 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 dei caratteri da lì nella tua directory dei caratteri e tutto dovrebbe funzionare.

Nota per i lettori: assicurarsi di leggere il commento di @ user2261073 e la risposta di @ Jeff in merito a un bug nel personalizzatore. È probabilmente la causa del tuo problema.

Il file del carattere 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 caratteri scaricati nella scheda di rete:

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

Sembra che ci sia un po 'di confusione sul tipo MIME per woff, più di un tipo MIME è 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) utilizza i caratteri .woff2 con lo stesso risultato iniziale di .woff, il W3C definisce ancora le specifiche ma al momento il tipo MIME sembra essere:

application/font-woff2

-Se hai seguito la risposta più votata e continua a non funzionare :

La Fontcartella DEVE essere allo stesso livello della cartella CSS. Correggere il percorso bootstrap.css non funzionerà.

Bootstrap.cssdeve navigare nella Fontscartella esattamente come questa:

@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 Glyphicons da una fonte esterna, piuttosto che fare affidamento su Bootstrap per fare tutto per te. Per farlo:

Puoi farlo in HTML:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

O CSS:

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

Ringraziamo edsiofi da questa discussione: Bootstrap 3 Glyphicons CDN

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

La parte pertinente dalle note di rilascio:

Rilasciato il carattere icona Glyphicons. Se hai bisogno di icone, alcune opzioni sono:

la versione a monte di Glyphicons

Octicons

Carattere fantastico

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

Se si desidera utilizzare i glifi, è necessario scaricarli separatamente.

Personalmente ho provato Font Awesome ed è abbastanza buono. L'aggiunta di icone è simile al modo glypicon:

<i class="fas fa-chess"></i>

Stavo esaminando questa mia vecchia domanda e dato che quella che doveva essere la risposta corretta fino ad ora, mi è stata data nei commenti, penso di meritarmene anche il merito.

Il problema risiedeva nel fatto che i file dei caratteri glyphicon scaricati dallo strumento di personalizzazione di bootstrap non erano gli stessi di quelli scaricati dal reindirizzamento trovato nella homepage di bootstrap. Quelli che funzionano come dovrebbero sono quelli che possono essere scaricati dal seguente link:

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

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

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

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Come descritto da @Stijn, il percorso predefinito in Bootstrap.cssnon è corretto quando si installa questo pacchetto da Nuget.

Cambia questa sezione in questo modo:

@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');
}

È possibile aggiungere questa riga di codice e il gioco è fatto.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Grazie.

IIS non server i .wofffile per impostazione predefinita, quindi in IIS dovrai aggiungere una <mimeMap>voce al tuo web.configfile;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Hai tutti i file sottostanti nella directory dei caratteri

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

Ho modificato il mio file less limits.less Ho modificato la variabile

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

l'originale era

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

Stava causando un problema

Ciò è dovuto a una codifica errata in bootstrap.css e bootstrap.min.css. Quando si scarica 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'utilizzo di Glyphicons, non funzionerà spesso ...

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

Questo è stato il motivo per cui le icone non sono apparse 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.

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

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

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

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

dimentichi di aggiungere la classe icon (contenente il riferimento al carattere):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Di seguito è ciò che l'ha risolto per me. Stavo ottenendo l'errore "bad URI" utilizzando nella console di Firebug. Le icone venivano visualizzate come numeri E ###. Ho dovuto aggiungere un file .htaccess nella mia directory 'fonts'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Possibile duplicato di: Carattere scaricabile su firefox: URI errato o accesso cross-site non consentito

Questo è davvero un tiro lungo, ma è stato il mio caso e dal momento che non è già qui.

Se stai compilando Twitter Bootstrap da SASS usando gulp-sasso grunt-sassie.node-sass. Assicurati che i moduli del nodo siano aggiornati, soprattutto se stai lavorando a un progetto piuttosto vecchio.

Si scopre che da qualche tempo la direttiva SASS @at-rootviene utilizzata nella definizione di @font-facein glyphicons, vedere https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .

Il gotcha qui è che node-sasscioè. libsassnon supportano la @at-rootdirettiva se è troppo vecchia. Se questo è il caso, otterrai un messaggio @font-facein @at-rootcui il browser non ha idea di cosa fare. Il risultato di ciò è che nessun font verrà scaricato e probabilmente vedrai immondizia anziché icone.

Nota: di seguito è probabilmente uno scenario di nicchia, ma volevo condividerlo nel caso in cui qualcun altro lo trovasse utile.

In un progetto Rails, stiamo riutilizzando un po 'attraverso una gemma che utilizza un motore Rails bootstrap-sass. Tutto andava bene nel progetto principale, ad eccezione della risoluzione del percorso dei caratteri glyphicon.

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

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

Abbiamo causato l' $bootstrap-sass-asset-helperinizializzazione della gemma del motore facendo:

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

ad esempio questo ha causato la risoluzione del percorso per:

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

Ancora una volta, questo non dovrebbe essere necessario in nessun normale progetto di binari che utilizza bootstrap-sass, ci capita di riutilizzare molte viste e questo ha funzionato per noi. Spero che questo possa aiutare qualcun altro.

Ecco cosa dice la documentazione ufficiale riguardo ai caratteri che non vengono visualizzati.

Modifica della posizione del carattere dell'icona Bootstrap presuppone che i file dei caratteri dell'icona si trovino nella directory ../fonts/, relativamente ai file CSS compilati. Spostare o rinominare questi file di font significa aggiornare il CSS in uno dei tre modi seguenti: modificare le variabili @ icon-font-path e / o @ icon-font-name nel file Less di origine. Utilizzare l'opzione URL relativi fornita dal compilatore Less. Modifica i percorsi url () nel CSS compilato. Utilizzare qualsiasi opzione più adatta alla propria specifica configurazione di sviluppo.

A parte questo, è possibile che tu abbia perso la copia della cartella dei caratteri nella directory principale

Ho avuto questo problema ed è stato causato dal file variabili.less. Sovrascriverlo per impostare il valore icon-font-path ha risolto il problema.

Il file strutturato è simile al seguente:

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

L'aggiunta del mio file variabili.less nella radice del contenuto e il riferimento a questo in styles.less hanno 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 l'ho fatto funzionare impostando l'azione di costruzione per ciascuno dei file dei caratteri su "Contenuto" e impostandoli su "Copia sempre".

avevo un codice di larghezza della scatola \ e094 per glyphicon-freccia in giù, infatti ho risolto il problema aggiungendo glyphicon nella classe css in questo modo:

<i class="glyphicon  glyphicon-arrow-down"></i>

se potesse aiutare qualcuno ...

Assicurati di non specificare troppo la famiglia di caratteri, ad esempio

*{font-family: Verdana;}

rimuoverà il font halfling dagli elementi i.

Stavo riscontrando lo stesso problema in cui il browser non era in grado di trovare i file dei caratteri e il mio problema era dovuto alle esclusioni nel mio file .htaccess che era nella whitelist dei file che non dovevano essere inviati index.phpper l'elaborazione. Poiché non è stato possibile caricare il file del carattere, 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 .woffe i .woff2file, quindi anche questi devono essere aggiunti 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 woffe woff2alla whitelist consente di caricare i file dei caratteri, quindi i glifi dovrebbero essere visualizzati correttamente.

È necessario impostare in base a questo ordine:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @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'); } 
</style>

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');
}

per

@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');
}

Ecco come includere l'icona in bootstrap 3

<span class="glyphicon glyphicon-bell"></span>

http://glyphicons.bootstrapcheatsheets.com/

Spero che aiuti.

@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 spazio dei nomi e glifi non funzionanti ma dopo aver aggiunto la riga sopra nel codice glifi che funzionano bene.

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