2015-02-01 22 views
6

Ho un tema WordPress che sto creando con il sorgente Bootstrap Sass. Gli stili funzionano, ma la maggior parte dei glyphicon non lo sono (solo asterisco e più). Sto compilando il mio Bootstrap al style.css e relativa a questo, c'è una cartella chiamata fonts che detiene i glyphicons (ho impostato il $icon-font-path: "fonts/";) Ecco un frammento del mio compilato style.css per dimostrare che il percorso dei font è corretta:Alcuni glyphicon di bootstrap non vengono caricati

@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.woff2") format("woff2"), 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"); } 
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Per esempio, questi lavori:

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> 
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 

Ma questi non lo fanno:

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> 

Qui 'S un frammento delle classi glyphicon:

.glyphicon-asterisk:before { content: "\2a"; } 
.glyphicon-plus:before { content: "\2b"; } 
.glyphicon-star:before { content: \e006; } 
.glyphicon-thumbs-up:before { content: \e125; } 

ho controllato la scheda di rete per vedere se stava caricando i font glyphicon, e appaiono solo quando il lavoro glyphicons (asterisco, plus). In caso contrario, il file di carattere non viene nemmeno visualizzato nella scheda di rete (nemmeno uno 404).

+1

Mi ricordo che qualche tempo fa il compilatore di bootstrap stava creando file di font non validi. A quel tempo le icone mostravano l'icona sbagliata o lasciavano solo un quadratino per indicare un personaggio sconosciuto. Vedi il quadrato quando usi icone che non funzionano? EDIT: Ecco un link a una risposta che mostra di cosa stavo parlando - http://stackoverflow.com/a/18474869/2375493 –

risposta

5

Il problema era che i valori del contenuto non erano racchiusi tra virgolette. Questo è ancora un problema con il download della sorgente sass www.getbootstrap.com, ma era recently fixed nel repository github bootstrap-sass.

+1

Mi hai risparmiato un sacco di lavoro! –

Problemi correlati