Bootstrap 3 Глификоны не работают

Я загрузил 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');
}

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

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

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

application/font-woff

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

application/x-font-woff

Изменить: Последняя версия Bootstrap в настоящее время (3.3.5) использует шрифты .woff2 с тем же начальным результатом, что и .off, 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');
}

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

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

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

Или CSS:

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

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

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

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

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

верхняя версия Glyphicons

Octicons

Font Awesome

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

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

Я лично попробовал Font Awesome, и это довольно хорошо. Добавление иконок похоже на глипикон:

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

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

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

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

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

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

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

Как описано в @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');
}

Вы можете добавить эту строку кода и готово.

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

Спасибо.

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

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

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

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

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

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

оригинал был

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

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

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

@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-файлы из полного пакета, и этот код будет реализован.

Это было причиной, почему значки не показывались для меня:

* {
    arial, sans-serif !important;
}

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

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

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

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

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

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

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

Ниже то, что исправило это для меня. Я получал ошибку "плохой URI", используя консоль Firebug. Иконки показывались как E ### числа. Мне пришлось добавить файл .htaccess в мой каталог «шрифты». <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Возможная копия: Загружаемый шрифт в Firefox: неверный URI или межсайтовый доступ запрещен

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

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

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

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

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

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

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инициализацию в gem движка, выполнив:

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

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

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

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

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

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

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

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

Структурированный файл выглядит так:

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

Добавление моего собственного файла variables.less в корень содержимого и ссылка на него в styles.less устраняет ошибку 404.

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

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

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

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

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

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

если бы это могло помочь кому-то ...

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

*{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]

Как вы можете видеть, такие файлы, как images, 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в белый список позволяет загружать файлы шрифтов, и глифы должны отображаться правильно.

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

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

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

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

Вот как вы включаете значок в начальной загрузке 3

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

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.css, используя Ctrl + c, Ctrl + v, и это сработало.