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.
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.
Risposte:
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
application/x-font-woff
quindi Firefox e Chrome erano finalmente entrambi felici :)
-Se hai seguito la risposta più votata e continua a non funzionare :
La Font
cartella DEVE essere allo stesso livello della cartella CSS. Correggere il percorso bootstrap.css
non funzionerà.
Bootstrap.css
deve navigare nella Fonts
cartella 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');
}
css
cartella deve essere una sottocartella della cartella contenente il file HTML. Quindi, come minimo, devi avere 1) il tuo file HTML, 2) un file css in una sottocartella chiamato css
e 3) i file dei caratteri in una sottocartella chiamata fonts
.
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
risolverlo per me.
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
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.
application/vnd.ms-fontobject
- .eot - application/x-font-woff
- .woff - application/x-font-ttf
- .ttf - image/svg+xml
- .svg
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>
woff, woff2 and ttf
estensioni?
Come descritto da @Stijn, il percorso predefinito in Bootstrap.css
non è 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 .woff
file per impostazione predefinita, quindi in IIS dovrai aggiungere una <mimeMap>
voce al tuo web.config
file;
<?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
$icon-font-path: "/assets/bootstrap/"
.
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-sass
o grunt-sass
ie.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-root
viene utilizzata nella definizione di @font-face
in glyphicons, vedere https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .
Il gotcha qui è che node-sass
cioè. libsass
non supportano la @at-root
direttiva se è troppo vecchia. Se questo è il caso, otterrai un messaggio @font-face
in @at-root
cui 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-helper
erafalse
durante la risoluzione quando ci aspettavamo che fosse vero, quindi il percorso era diverso.
Abbiamo causato l' $bootstrap-sass-asset-helper
inizializzazione 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/";
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 ...
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.php
per 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 .woff
e i .woff2
file, 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 woff
e woff2
alla 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.