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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

@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 dev отображают загруженные шрифты на вкладке сети:

chrome network tab font download

Ответ 4

В моем случае я получал 404 для glyphicons-halflings-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

Ответ 5

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

Папка 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');
}

Ответ 6

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

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

<link href="//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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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>

Ответ 10

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

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

оригинал был

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

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

Ответ 11

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

Ответ 12

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

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

Ответ 13

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

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

и при миграции на основе guide (.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>

Ответ 14

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

Ответ 15

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

* {
    arial, sans-serif !important;
}

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

Ответ 16

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

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

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

Ответ 17

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

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

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

Ответ 18

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

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

Ответ 19

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

*{font-family: Verdana;}

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

Ответ 20

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

В проекте с рельсами мы многократно используем самоцвет, который является движком 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 в самолете двигателя:

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

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

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

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

Ответ 21

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

Ответ 22

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

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

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

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

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

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

Ответ 23

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

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

Ответ 24

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

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

to

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

Ответ 25

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

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

http://glyphicons.bootstrapcheatsheets.com/

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

Ответ 26

@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 с пространством имен, а глификоны не работают, но после добавления выше строки в глификонах кода работают нормально.

Ответ 27

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

Ответ 28

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

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

Ответ 29

Этот ответ предназначен для тех, кто использует Nancy (NancyFx).

У меня есть приложение NancyFX, поддерживающее ASP.NET, и я получил Boostrap через NuGet.

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

Проблема заключалась в том, что я отсутствовал в соглашении, рассказывая Нэнси, где искать контент. Как только я понял, решение было просто добавить следующую перегрузку в файл bootstrapper:

protected override void ConfigureConventions(NancyConventions nancyConventions)
{
    base.ConfigureConventions(nancyConventions);
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/fonts"));
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/Scripts"));
}

Ответ 30

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

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

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