Бутстрап 3 технологии glyphicons не работают

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

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

Примечание Для читателей: обязательно прочитайте @user2261073 комментарий и @Джефф!--3--> по поводу ошибок в настройке. Это, вероятно, причина вашей проблемы.

---

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

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

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

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

application/font-woff

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

application/x-font-woff

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

application/font-woff2

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

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

<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

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

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

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

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

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

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

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

восходящая версия технологии glyphicons

Octicons

Шрифт Удивительным

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

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

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

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

Я изменил мои меньшие переменные.меньше файла Я изменил переменную

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

оригинал

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

это было причиной проблемы

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

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

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

другая проблема / решение может иметь этот 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>

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

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

* {
    arial, sans-serif !important;
}

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

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

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

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

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

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

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

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

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

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

структура файла выглядит так:

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

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

переменные.меньше содержит:

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

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

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

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

*{font-family: Verdana;}

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

вы должны установить в следующем порядке:

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

У меня был код ширины окна \e094 для glyphicon-стрелка вниз, на самом деле я решил проблему добавления glyphicon в классе css вот так:

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

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

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

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

вы должны установить в следующем порядке:

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