Bootstrap 3 Glify nie działają

Pobrałem bootstrap 3.0 i nie mogę uruchomić glifikonów. Pojawia się błąd „E003”. Wszelkie pomysły, dlaczego tak się dzieje? Próbowałem zarówno lokalnie, jak i online i nadal mam ten sam problem.

Miałem ten sam problem i nie mogłem znaleźć żadnych informacji na ten temat, z wyjątkiem ukrytych komentarzy na tej stronie. Moje pliki czcionek ładowały się dobrze zgodnie z Chrome, ale ikony nie wyświetlały się poprawnie. Udzielam odpowiedzi, więc mam nadzieję, że pomoże innym.

Coś było nie tak z plikami czcionek pobranymi z narzędzia dostosowywania Bootstrap 3. Aby uzyskać prawidłowe czcionki, przejdź do strony głównej Bootstrap i pobierz pełny plik .zip. Wyodrębnij cztery pliki czcionek stamtąd do katalogu czcionek i wszystko powinno działać.

Uwaga dla czytelników: koniecznie przeczytaj komentarz @ user2261073 i odpowiedź Jeffa dotyczącą błędu w narzędziu dostosowywania. Prawdopodobnie jest to przyczyną twojego problemu.

Plik czcionki nie jest ładowany poprawnie. Sprawdź, czy pliki znajdują się w oczekiwanej lokalizacji.

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

Jak wskazał Daniel, może to być również problem typu mimetycznego. Narzędzia deweloperskie Chrome pokazują pobrane czcionki na karcie sieci:

W moim przypadku dostawałem 404 za glifiki-halflings-regular.woff i niewidoczne glify w przeglądarkach mobilnych.

Wygląda na to, że istnieje pewne zamieszanie dotyczące typu MIME dla woff, więcej niż jeden typ MIME jest akceptowany przez różne przeglądarki, ale W3C mówi :

application/font-woff

Edycja: po przetestowaniu następującego typu MIME dla woff działa obecnie we wszystkich przeglądarkach:

application/x-font-woff

Edycja: Najnowsza wersja Bootstrap w tej chwili (3.3.5) używa czcionek .woff2 z takim samym początkowym wynikiem jak .woff, W3C wciąż definiuje specyfikację, ale w tej chwili typ MIME wydaje się:

application/font-woff2

- Jeśli zastosowałeś się do najwyżej ocenianej odpowiedzi, która nadal nie działa :

FontFolder musi być na tym samym poziomie, co w folderze CSS. Naprawienie ścieżki bootstrap.css nie będzie działać.

Bootstrap.cssmusi przejść do Fontsfolderu dokładnie tak:

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

Jeśli inne rozwiązania nie działają, możesz spróbować zaimportować Glify z zewnętrznego źródła, zamiast polegać na Bootstrap, który zrobi wszystko za Ciebie. Aby to zrobić:

Możesz to zrobić w HTML:

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

Lub CSS:

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

Podziękowania dla edsiofi z tego wątku: Bootstrap 3 Glyphicons CDN

W przypadku, gdy ktoś inny skończył tutaj i używa Bootstrap> = v4.0: obsługa glifikonu jest odrzucana

Odpowiednia część z informacji o wersji:

Upuszczono czcionkę ikony Glyphicons. Jeśli potrzebujesz ikon, niektóre opcje to:

poprzednia wersja Glyphicons

Oktony

Czcionka Awesome

Źródło: https://v4-alpha.getbootstrap.com/migration/#components

Jeśli chcesz używać glifikonów, musisz pobrać go osobno.

Osobiście wypróbowałem Font Awesome i jest całkiem niezły. Dodawanie ikon jest podobne do glifikonu:

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

Przeglądałem moje stare pytanie i skoro w komentarzach udzieliłem odpowiedzi na to pytanie, to chyba zasługuję na uznanie.

Problem polegał na tym, że pliki czcionek glifikonów pobrane z narzędzia dostosowywania bootstrap nie były takie same, jak pliki pobrane z przekierowania znalezionego na stronie głównej bootstrap. Te, które działają tak, jak powinny, to te, które można pobrać z następującego linku:

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

Każdy, kto ma problemy ze starymi, złymi plikami dostosowywania, powinien zastąpić czcionki z powyższego łącza.

Witryny platformy Azure brakuje konfiguracji WIME MIME. Musisz dodać następujący wpis do pliku web.config

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

Jak opisano w @Stijn, domyślna lokalizacja w Bootstrap.cssjest nieprawidłowa podczas instalacji tego pakietu z Nuget.

Zmień tę sekcję, aby wyglądała następująco:

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

Możesz dodać ten wiersz kodu i gotowe.

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

Dzięki.

Usługi IIS .woffdomyślnie nie serwerują plików, dlatego w usługach IIS musisz dodać <mimeMap>wpis do web.configpliku;

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

Czy masz wszystkie poniższe pliki w katalogu czcionek?

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

Zmodyfikowałem swój plik mniej zmiennych. Bez. Zmodyfikowałem zmienną

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

oryginał był

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

To powodowało problem

Wynika to z nieprawidłowego kodowania w bootstrap.css i bootstrap.min.css. Podczas pobierania Bootstrap 3.0 z Customizera brakuje następującego kodu:

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

Ponieważ jest to główny kod do używania Glyphicons, nie będzie on działać ...

Pobierz pliki css z pełnego pakietu, a ten kod zostanie zaimplementowany.

To był powód, dla którego ikony się nie pokazały:

* {
    arial, sans-serif !important;
}

Po usunięciu tej części CSSwszystko działało tak, jak powinno. Najważniejszy był ten, który powodował kłopoty.

Innym problemem / rozwiązaniem może być kod Bootstrap 2.x:

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

a podczas migracji na podstawie guide ( .icon-* ---> .glyphicon .glyphicon-*):

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

zapomniałeś dodać klasę ikon (zawierającą odniesienie do czcionki):

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

Poniżej znajduje się to, co mnie naprawiło. Podczas korzystania z konsoli Firebug pojawiał się błąd „zły URI”. Ikony były wyświetlane jako liczby E ###. Musiałem dodać plik .htaccess do mojego katalogu „fonts”. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Możliwe duplikaty: czcionki do pobrania na Firefox: zły identyfikator URI lub dostęp do wielu witryn jest niedozwolony

To bardzo długa sesja zdjęciowa, ale tak było w moim przypadku i skoro jej tu jeszcze nie ma.

Jeśli kompilujesz Twitter Bootstrap z SASS za pomocą gulp-sasslub grunt-sassnp. node-sass. Upewnij się, że moduły węzłów są aktualne, szczególnie jeśli pracujesz nad dość starym projektem.

Okazuje się, że od pewnego czasu @at-rootw definicji @font-faceglifikonów używana jest dyrektywa SASS , patrz https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap.scsglyphicons. .

Gotcha tutaj jest to, że node-sass. libsassnie popierają @at-rootdyrektywy, jeśli jest ona zbyt stara. W takim przypadku otrzymasz @font-faceopakowanie, w @at-rootktórym przeglądarka nie ma pojęcia, co z tym zrobić. W wyniku tego żadna czcionka nie zostanie pobrana, a zamiast ikon prawdopodobnie zobaczysz śmieci.

Uwaga: poniżej jest prawdopodobnie scenariusz niszowy, ale chciałem go udostępnić na wypadek, gdyby ktoś inny uznał go za przydatny.

W projekcie Rails dość często wykorzystujemy klejnot, który wykorzystuje silnik Rails bootstrap-sass. Wszystko było dobrze w głównym projekcie, z wyjątkiem rozdzielczości ścieżki czcionki glifikonu.

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

Odkryliśmy, że $bootstrap-sass-asset-helperbyło to w falsetrakcie rozwiązywania, kiedy spodziewaliśmy się, że to prawda, więc ścieżka była inna.

Zainicjowaliśmy $bootstrap-sass-asset-helperinicjalizację w klejnocie silnika, wykonując:

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

np. spowodowało to przejście ścieżki do:

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

Ponownie, nie powinno to być konieczne w żadnym normalnym projekcie z użyciem szyn bootstrap-sass, po prostu akurat używamy wielu widoków i to nam się udało. Mam nadzieję, że może to pomóc komuś innemu.

Oto, co mówi oficjalna dokumentacja dotycząca nierenderowania czcionek.

Zmiana położenia czcionki ikony Bootstrap zakłada, że ​​pliki czcionek ikony będą znajdować się w katalogu ../fonts/, względem skompilowanych plików CSS. Przeniesienie lub zmiana nazwy tych plików czcionek oznacza aktualizację CSS na jeden z trzech sposobów: Zmień zmienne @ icon-font-path i / lub @ icon-font-name w źródle Mniej plików. Wykorzystaj opcję względnych adresów URL dostarczoną przez kompilator Less. Zmień ścieżki url () w skompilowanym CSS. Użyj dowolnej opcji, która najlepiej odpowiada konkretnej konfiguracji programistycznej.

Poza tym przyczyną może być pominięcie kopiowania folderu czcionek do katalogu głównego

Miałem ten problem i był on spowodowany plikiem zmiennych.less. Przesłonięcie go w celu ustawienia wartości ikony-czcionki-ścieżki rozwiązało problem.

Struktura pliku wygląda następująco:

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

Dodanie własnego pliku zmiennych.less w katalogu głównym zawartości i odwołanie się do niego w styles.less rozwiązało błąd 404.

Variables.less zawiera:

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

Mam Bootstrap od NuGet. Kiedy opublikowałem moją stronę, glify nie działały.

W moim przypadku uruchomiłem go, ustawiając akcję kompilacji dla każdego pliku czcionek na „Treść” i ustawiam na „Zawsze kopiuj”.

Miałem kod szerokości pola \ e094 dla strzałki glifikowanej w dół, w rzeczywistości rozwiązałem problem z dodawaniem glifikonu w klasie css w ten sposób:

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

gdyby to mogło komuś pomóc ...

Na przykład upewnij się, że nie przesadziłeś z określeniem rodziny czcionek

*{font-family: Verdana;}

usunie czcionkę halflings z elementów i.

Miałem ten sam problem, w którym przeglądarka nie mogła znaleźć plików czcionek, a mój problem był spowodowany wykluczeniami z mojego pliku .htaccess, który był plikami z białej listy, do których nie należy wysyłać do index.phpprzetworzenia. Ponieważ nie można załadować pliku czcionki, znaki zostały zastąpione BLOBEM.

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

Jak widać, pliki takie jak obrazy, rss i xml są wykluczone z przepisywania, ale pliki czcionek to pliki .woffi .woff2pliki, więc one również wymagały dodania do białej listy.

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

Dodanie woffi woff2do białej listy umożliwia załadowanie plików czcionek, a następnie glify powinny być wyświetlane poprawnie.

Musisz ustawić według tego zamówienia:

<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>

Dla mnie zadziałało zastąpienie tras z:

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

do

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

W ten sposób dołączasz ikonę do bootstrap 3

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

http://glyphicons.bootstrapcheatsheets.com/

Mam nadzieję, że to pomaga.

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

Korzystam z bootstrap z niedziałającą przestrzenią nazw i glifikonów, ale po dodaniu powyższej linii w kodzie glifikony działają poprawnie.

Właśnie zmieniłem nazwę czcionki z bootstrap.css, używając Ctrl + c, Ctrl + v i działało.