Bootstrap 3 Glyphicons не работают

Я загрузил bootstrap 3.0 и не могу заставить глификоны работать. Я получаю какую-то ошибку «E003». Есть идеи, почему это происходит? Я пробовал как локально, так и онлайн, и у меня по-прежнему возникает такая же проблема.

У меня была такая же проблема и я не мог найти никакой информации об этом, кроме скрытых комментариев на этой странице. Мои файлы шрифтов загружались очень хорошо в соответствии с Chrome, но значки не отображались должным образом. Я делаю это ответ, поэтому он, надеюсь, поможет другим.

Что-то не так с файлами шрифтов, которые я загрузил с помощью инструмента настройки Bootstrap 3. Чтобы получить правильные шрифты, зайдите на домашнюю страницу Bootstrap и загрузите полный .zip-файл. Извлеките четыре файла шрифта оттуда в каталог шрифтов и все должно работать.

Примечание для читателей: обязательно прочитайте комментарий @ user2261073 и ответ @ Jeff относительно ошибки в настройке. Вероятно, это причина вашей проблемы.


Файл шрифта загружен неправильно. Проверьте, находятся ли файлы в ожидаемом месте.

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

Как указал Даниэль, это может быть и проблема с mimetype. Инструменты разработчика Chrome отображают загруженные шрифты на вкладке сети:

chrome загрузить вкладку скачать

В моем случае я получал 404 для глификонов – халфлингов – regular.woff и невидимых глификонов в мобильных браузерах.

Похоже, существует некоторая путаница в отношении типа MIME для woff, причем несколько типов MIME принимаются разными браузерами, но W3C говорит :

 application/font-woff 

Изменить: после тестирования следующего типа MIME для работы woff во всех браузерах в настоящее время:

 application/x-font-woff 

Изменить: последняя версия Bootstrap в это время (3.3.5) использует шрифты .woff2 с тем же начальным результатом, что и .woff, W3C все еще определяет спецификацию, но в настоящий момент тип MIME выглядит следующим образом:

 application/font-woff2 

-Если вы следовали за наивысшим рейтингом, и он все еще не работает :

Font папка ДОЛЖНА находиться на том же уровне, что и ваша папка CSS. Исправление пути в bootstrap.css не будет работать.

Bootstrap.css должен перейти к папке Fonts точности так:

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

Если другие решения не работают, вы можете попробовать импортировать Glyphicons из внешнего источника, а не полагаться на Bootstrap, чтобы сделать все для вас. Сделать это:

Вы можете сделать это в HTML:

  

Или CSS:

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

Кредит для edsiofi из этой темы: Bootstrap 3 Glyphicons CDN

Я просматривал этот старый вопрос, и, поскольку до тех пор, как предполагалось, был правильным ответом, он был предоставлен мной в комментариях, я думаю, что я также заслужил это.

Проблема заключалась в том, что файлы шрифтов glyphicon, загруженные из инструмента настройки бутстрапа, не совпадают с теми, которые загружаются из перенаправления, найденного на домашней странице начальной загрузки. Те, которые работают так, как они должны, могут быть загружены по следующей ссылке:

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

Любой, у кого есть проблемы со старыми файлами плохой настройки, должен перезаписать шрифты из приведенной выше ссылки.

На веб-сайтах Azure отсутствует конфигурация MIME woff . Вы должны добавить следующую запись в web.config

        

Как описано в @Stijn, расположение по умолчанию в Bootstrap.css неверно при установке этого пакета из Nuget .

Измените этот раздел, чтобы он выглядел следующим образом:

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

IIS не будет .woff файлы .woff по умолчанию, поэтому в IIS вам нужно добавить запись в файл web.config ;

         

Я изменил свой файл с переменными lessless. Я изменил переменную

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

оригинал был

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

Это вызывало проблему

Это связано с неправильным кодированием в bootstrap.css и bootstrap.min.css. Когда вы загружаете Bootstrap 3.0 из Customizer, отсутствует следующий код:

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

Поскольку это основной код для использования Glyphicons, он не будет работать с …

Загрузите css-файлы из полного пакета, и этот код будет реализован.

У вас есть все ниже файлов в вашем каталоге шрифтов

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

В случае, если кто-то оказался здесь и использовал Bootstrap> = v4.0: поддержка glyphicon удалена

Соответствующая часть из примечаний к выпуску:

Выбросил шрифт значка Glyphicons. Если вам нужны значки, некоторые параметры:

восходящая версия Glyphicons

Octicons

Шрифт Awesome

Источник: https://v4-alpha.getbootstrap.com/migration/#components

Если вы хотите использовать глификоны, вам нужно скачать его отдельно.

Я лично пробовал Font Awesome, и это неплохо. Добавление значков аналогично методу glypicon:

  

Другая проблема / решение может иметь этот код Bootstrap 2.x:

  

и при переносе на основе гида ( .icon-* ---> .glyphicon .glyphicon-* ):

  

вы забыли добавить class значка (содержащий ссылку на шрифт):

  

Ниже это исправлено для меня. Я получил ошибку «плохой URI», используя консоль Firebug. icons отображались как номера E ###. Мне пришлось добавить файл .htaccess в мой каталог «fonts». Header set Access-Control-Allow-Origin "*" Возможный дубликат: Загружаемый шрифт на firefox: неправильный URI или межсайтовый доступ не разрешен

Именно по этой причине иконы не явились для меня:

 * { arial, sans-serif !important; } 

После того как я удалил эту часть моего CSS , все работало так, как должно. Важным был тот, который вызывал проблемы.

Это очень длинная стрельба, но это был мой случай, и так как его здесь нет.

Если вы компилируете Twitter Bootstrap из SASS, используя gulp-sass или grunt-sass т.е. node-sass . Убедитесь, что модули узлов обновлены, особенно если вы работаете над довольно старым проектом.

Оказывается, что некоторое время назад директива SASS @at-root используется в определении @font-face в глификонах, см. https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss .

Здесь есть тот node-sass что. libsass не поддерживает директиву @at-root если она слишком старая. Если это так, вы получите @font-face завернутый в @at-root который браузер не знает, что с ним делать. Результатом этого является то, что шрифт не будет загружен, и вы скорее всего увидите мусор вместо значков.

Примечание: ниже, вероятно, есть нишевый сценарий, но я хотел бы поделиться им, если кто-то может найти его полезным.

В проекте рельсов мы многократно используем самоцвет, который является Rails-движком, использующим bootstrap-sass . Все было хорошо в основном проекте, за исключением разрешения шрифта шрифта глификона.

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

Мы обнаружили, что $bootstrap-sass-asset-helper был false во время разрешения, когда мы ожидали, что оно будет истинным, поэтому путь был другим.

Мы $bootstrap-sass-asset-helper инициализацию $bootstrap-sass-asset-helper в самородке двигателя, выполнив:

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

например, это вызвало путь к решению:

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

Опять же, это не должно быть необходимым в любом проекте обычных рельсов с использованием bootstrap-sass , мы просто используем много просмотров, и это сработало для нас. Надеюсь, это может помочь кому-то другому.

Вот что говорится в официальной документации относительно шрифтов, которые не отображаются.

Изменение местоположения шрифта значка Bootstrap предполагает, что файлы шрифтов значков будут расположены в каталоге ../fonts/ по сравнению с скомпилированными файлами CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов: Изменить переменные @ icon-font-path и / или @ icon-font-name в источнике Меньше файлов. Используйте параметр относительных URL-адресов, предоставляемый компилятором Less. Измените пути url () в скомпилированном CSS. Используйте любой вариант, наиболее подходящий для вашей конкретной настройки разработки.

Кроме того, может быть, что вы пропустили копию папки шрифтов в корневой каталог

У меня была эта проблема, и это было вызвано файлом variables.less. Переопределение этого параметра, чтобы установить значение значка-шрифта, решило проблему.

Структурированный файл выглядит следующим образом:

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

Добавляя свой собственный файл variables.less в корневой каталог Content и ссылаясь на него в styles.less, разрешена ошибка 404.

Variables.less содержит:

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

Я получил Bootstrap от NuGet. Когда я опубликовал свой сайт, глифы не работали.

В моем случае я получил его работу, установив действие сборки для каждого из файлов шрифтов в «Содержимое» и установив их в «Копировать всегда».

Убедитесь, что вы не закончили задание семейства шрифтов, например

 *{font-family: Verdana;} 

удалит шрифт халфлинга из i элементов.

У меня была та же проблема, когда браузеру не удалось найти файлы шрифтов, и моя проблема была вызвана исключениями в моем файле .htaccess, который был белым файлом, который не должен отправляться в index.php для обработки. Поскольку файл шрифта не может быть загружен, символы были заменены на BLOB.

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

Как вы можете видеть, файлы, такие как изображения, rss и xml, исключены из перезаписи, но файлы шрифтов являются файлами .woff и .woff2 , поэтому они также нуждаются в добавлении в белый список.

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

Добавление woff и woff2 в белый список позволяет загружать файлы шрифтов, а глификоны должны отображаться должным образом.

Вы должны установить этот порядок:

   

Для меня работала замена маршрутов:

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

в

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

У меня был код ширины коробки \ e094 для glyphicon-arrow-down, на самом деле я решил проблему добавления глификона в class css следующим образом:

  

если это может помочь кому-то …

Вот как вы включаете значок в bootstrap 3

  

http://glyphicons.bootstrapcheatsheets.com/

Надеюсь, это поможет.

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

Я использую bootstrap с пространством имен, и глификоны не работают, но после добавления выше строки в глификонах кода работают нормально.

Я просто переименовал шрифт из bootstrap.css, используя Ctrl + c, Ctrl + v, и он сработал.

Вы должны установить этот порядок:

   
Interesting Posts
Давайте будем гением компьютера.