2015-02-01 18 views
6

Mam motyw WordPress, który buduję ze źródłem Bootstrap Sass. Style działają, ale większość glifów nie jest (tylko gwiazdka i plus). Mam kompilacji mojego Bootstrap do style.css i względem, że znajduje się folder o nazwie fonts która posiada glyphicons (ustawić $icon-font-path: "fonts/";) Oto urywek z mojego skompilowany style.css aby pokazać, że ścieżka czcionek jest poprawna:Niektóre bootstrap glyphicons nie ładuje się

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

Dla np, te prace:

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

Ale to nie:

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

Tutaj Jest to fragment z klas glyphicon:

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

sprawdziłem kartę sieciową, aby sprawdzić, czy to było ładowanie czcionek glyphicon i tylko pojawiają się, gdy praca glyphicons (gwiazdka, plus). W przeciwnym razie plik czcionki nie będzie nawet widoczny na karcie sieci (nawet 404).

+1

Pamiętam, że jakiś czas temu kompilator bootstrap tworzył niepoprawne pliki czcionek. W tym czasie ikony albo pokazywały niewłaściwą ikonę, albo pozostawiały tylko mały kwadrat, aby wskazać nieznaną postać. Czy widzisz kwadrat, gdy używasz ikon, które nie działają? EDYCJA: Oto link do odpowiedzi, która pokazuje, o czym mówiłem - http://stackoverflow.com/a/18474869/2375493 –

Odpowiedz

5

Problem polegał na tym, że wartości treści nie były zawijane w cudzysłowy. Problem ten nadal występuje w przypadku pobierania źródła sass www.getbootstrap.com, ale był to recently fixed w repozytorium github bootstrap-sass.

+1

Uratowałeś mi dużo pracy! –

Powiązane problemy