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

360

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

scooterlord
источник
1
где вы получаете ошибку?
Даниэль А. Уайт
1
Куда бы я ни вставил значки ... Вот ошибка, которую я получаю. Единственное, что я сделал, это загрузил загрузчик с настройщика сайта и заменил предыдущие файлы (хотя файлы шрифтов имели разные имена). Теперь они не работают ... Также попробовали несколько браузеров, Firefox, Chrome, то есть то же самое ... i.imgur.com/2f474kX.jpg
scooterlord
2
Я только что скачал последнюю версию сегодня, и глифы не отображаются, если я использую свернутый файл CSS. Если я использую «нормальный» bootstrap.css, все работает нормально.
Антонио Сесто
1
По состоянию на 23 июня 2015 года, включите последнюю версию v3.3.5 maxcdn, у вас нет ошибок
1
Я обнаружил, что использую глифы на белом фоне и ожидаю их появления. Использование <i style = "color: black" class = "glyphicon glyphicon-new-window"> </ i> исправило это.
Виджай Вепакомма

Ответы:

478

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

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

Джефф
источник
Вы сэкономили много часов боли. Я уже потратил час боли, но потом подумал посмотреть здесь.
Кристина
6
работает замена файлов шрифтов на включенные в bootstrap-3.0.0 домашней страницы getbootstrap.com. Спасибо за совет!
Михал Копец
11
Правильный ответ! Файлы шрифтов из настройщика повреждены!
Чарльз Ингаллс
2
Я хотел добавить свой ответ «Я тоже» и сказать, что, потратив пару часов усилий и почти злости бросив свою карьеру, я нашел этот ответ, и теперь у меня снова есть рабочие глифы. Спасибо!!
dohpaz42
2
Я не могу дождаться, чтобы стать частью всех людей, которые добились успеха, но сейчас, несмотря на то, что я попробовал почти каждое решение и ответ стека, я все еще не могу видеть значки. Я даже пытался запустить совершенно новое приложение MVC 5 и использовать Nuget для установки начальной версии начальной загрузки 3.3.7, которая правильно устанавливает все папки и ничего не показывает 404 в инструменте отладчика браузера или что-то, что говорит о том, что шрифты не загружены и Я могу сказать вам, что код для span идеально подходит, так что где моя проблема. Я, честно говоря, не знаю. Я протестировал все браузеры, и ни один из них не показывает значки
Marc Roussel
235

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

шрифт Chrome Network скачать шрифт

user247702
источник
5
и что mimetypes зарегистрированы должным образом.
Даниэль А. Уайт
4
... хотя файлы должны быть на месте, когда я загрузил файл bootstrap.zip, я все равно дважды проверил и все на месте. Как проверить регистрацию
mimetypes
1
@ user2261073 .eot файл не должен загружаться, если вы не используете Internet Explorer.
user247702
46
Похоже, я нашел проблему. Настройщик начальной загрузки, кажется, отправляет шрифты другого размера, чем те, которые находятся внутри всего пакета начальной загрузки, который идет с примерами. Я заменил файлы, и теперь все работает нормально. Это скорее всего ошибка в настройщике начальной загрузки? Кто знает. Могу ли я сообщить об этом где-нибудь, чтобы они могли изучить это?
скутер
2
@ user2261073 Вы можете сообщить об этом в проекте GitHub. Кажется, уже есть активный отчет об ошибке: github.com/twbs/bootstrap/issues/10008
user247702
78

В моем случае я получал 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
D.Rosado
источник
17
Это указало мне в правильном направлении, но также дало мне еще одно предупреждение в Chrome ... Тип MIME должен быть на самом деле: application/x-font-woffтогда Firefox и Chrome были наконец оба счастливы :)
ghiscoding
Спасибо, это была настоящая проблема для меня. Все работало нормально локально, но после публикации в Azure тип .woff был единственным, что создавало проблемы.
Кевин Клоет
56

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

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');
}
CrazyPaste
источник
3
Я думаю, что 70% Glyphicon не работает в этом случае, хорошие ответы, я часто помещаю файлы Bootstrap css в css / bootstrap. Просто
перенесите
1
Ну, путь для меня выглядит ТОЧНО, как вы предписали, но он все еще не работает для меня. Также не происходит загрузка исходного пакета и замена файлов шрифтов. Я должен добавить, что некоторые глифы загружаются, а другие нет. Вы можете помочь?
Дарт Кодер
где находится папка со шрифтами, которой у меня нет?
Свифт
Также cssпапка должна быть подпапкой папки, содержащей ваш HTML-файл. Таким образом, как минимум, вы должны иметь 1) ваш HTML-файл, 2) файл CSS в подпапке с именем cssи 3) файлы шрифтов в подпапке с именем fonts.
Киви Шапиро
Это не имеет значения при загрузке из CDN; только при локальной загрузке. Добавив ссылку, //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.cssрешил это для меня.
Джеймс Уилкинс
48

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

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

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

Крис Тюдор
источник
24

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

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

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

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

Octicons

Font Awesome

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

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

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

<i class="fas fa-chess"></i>
Джанер
источник
21

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

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

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

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

scooterlord
источник
Проблема с настройщиком была исправлена ​​давно. Это больше не проблема в текущей Bootstrap.
cvrebert
1
В настоящее время они, вероятно, сталкиваются с проблемами определения местоположения шрифтов значков, хотя способы работы путей шрифтов значков задокументированы ...
cvrebert
Есть определенные вещи, чтобы проверить эту проблему. - Проверьте этот тип MIME в IIS для вашего сайта .. Он должен быть там для одного из вышеуказанных вопросов ... - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg
pedram
Мои глифы работают во всех браузерах, кроме IE. IE отображает их при первой загрузке - нажмите F5, а затем больше не отображается. DOM правильный, css применен правильно. Я не могу найти решение. Идеи?
Skychan
1
Я могу поставить / снять галочку с «content:» \ e080 »« CSS, который устанавливает контент для определенного символа. Когда я это делаю, размер пролета физически меняется от чего-то к нулю и обратно. Так что это действительно похоже на ошибку IE - не удается нарисовать персонажа.
Skychan
18

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

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 
Антон Калчик
источник
woff, woff2 and ttfрасширения?
Kiquenet
16

Как описано в @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');
}
dball
источник
1
Если вы используете LESS, вы можете просто переопределить его в своем меньшем файле и изменить URL-адреса, чтобы они соответствовали относительным путям из вашего CSS-файла вашего поколения, или корень их.
Крис Сирлз
Это больше не должно быть проблемой с последней версией загрузчика. Обновить!
Дебл
11

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

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

Спасибо.

Y. Joy Ch. Сингха
источник
В нем отсутствуют многие новые значки, добавленные в более поздних версиях v3.
Джеймс Уилкинс
Идеальный ответ, для меня в любом случае.
Тоннор
8

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>
Стив Купер
источник
Это гораздо лучше масштабируется, вместо того, чтобы не забывать настраивать его для каждой машины IIS. Хорошее упоминание
Мэтти Медведь
Вы должны обновить свой mimetype, чтобы он был «application / font-woff» в соответствии с текущими стандартами: stackoverflow.com/a/5142316/2267817
Always Learning
приложение / font-woff против приложения / x-woff ?
Kiquenet
7

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

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Vicky
источник
Это правильный ответ. Человек может найти правильную папку для размещения этих файлов, используя ссылку Xenu sleuth
Nav
2
Но есть люди, у которых есть все эти файлы в папке шрифтов, но они все еще получают эту ошибку, если wim mime-типа не зарегистрирован в IIS.
Stack0verflow
Каталог шрифтов требуется? У меня есть только bootstrap.css и bootstrap.js
Kiquenet
7

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

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

оригинал был

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

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

Сезар Эрнандес
источник
2
Для самоцвета bootstrap-sass 3.2.0.1 это, кажется, нужно $icon-font-path: "/assets/bootstrap/".
Джошуа Мухайм,
Определенно способ работать с бутстрапом, а не против него.
Хэмпстер
6

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

Prinsen
источник
6

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

* {
    arial, sans-serif !important;
}

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

Джо Смо
источник
Спасибо! После того, как я почесал голову более 4 часов и попробовал множество разных вещей, я вспомнил, что добавил шрифт в «span» с важным. Убрал его и все вернулось на круги своя ..
Али Хайдер
5

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

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

Аарон
источник
5

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

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

Виктор Хэгквист
источник
4

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

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

Kross
источник
4

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

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

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

ворота
источник
Я пропустил, чтобы скопировать папку шрифтов, я не знаю, где это? Кто-нибудь может мне помочь?
Свифт
3

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

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

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

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

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

@icon-font-path:          "fonts/";
Аарон
источник
Это помогло мне понять, что я уничтожил свою переменную пути ... случайно, но да, спасибо!
Тейлор А. Лич
3

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

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

Эрик
источник
3

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

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

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

Пьер-Оливье Пиньон
источник
Чувак, это тоже была моя проблема с использованием CDN
Ричард Баркер
3

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

*{font-family: Verdana;}

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

S ..
источник
3

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

worldofjr
источник
2

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

<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>
Ненад
источник
2

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

@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');
}
Таби Викунья
источник
2
@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');}

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

Ратан Пол
источник
2

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

Lanlan82
источник