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, и он сработал.

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

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