Я загрузил bootstrap 3.0 и не могу заставить глифы работать. Я получаю какую-то ошибку "E003". Есть идеи, почему это происходит? Я пробовал как локально, так и онлайн, и у меня все та же проблема.
twitter-bootstrap-3
glyphicons
scooterlord
источник
источник
Ответы:
У меня была та же проблема, и я не мог найти информацию о ней, кроме как в скрытых комментариях на этой странице. Мои файлы шрифтов загружались очень хорошо в соответствии с Chrome, но значки не отображались должным образом. Я делаю это ответ, так что, надеюсь, поможет другим.
Что-то не так с файлами шрифтов, которые я скачал из инструмента настройки Bootstrap 3. Чтобы получить правильные шрифты, перейдите на домашнюю страницу Bootstrap и загрузите полный ZIP-файл. Извлеките четыре файла шрифтов оттуда в каталог шрифтов, и все должно работать.
источник
Примечание для читателей: обязательно прочитайте комментарий @ user2261073 и ответ @ Jeff относительно ошибки в настройщике. Это, вероятно, причина вашей проблемы.
Файл шрифта загружается неправильно. Проверьте, находятся ли файлы в ожидаемом месте.
Как указал Даниэль, это также может быть проблемой подражания. Инструменты разработчика Chrome отображают загруженные шрифты на вкладке сети:
источник
В моем случае я получал 404 для glyphicons-halflings-регулярно.woff и невидимые глифы в мобильных браузерах.
Похоже, существует некоторая путаница с типом MIME для woff, более чем один тип MIME принимается разными браузерами, но W3C говорит :
Изменить: После тестирования следующий тип MIME для woff в настоящее время работает во всех браузерах:
Изменить: Последняя версия Bootstrap в настоящее время (3.3.5) использует шрифты .woff2 с тем же начальным результатом, что и .off, W3C все еще определяет спецификацию, но на данный момент тип MIME выглядит следующим образом:
источник
application/x-font-woff
тогда Firefox и Chrome были наконец оба счастливы :)-Если вы следовали за ответом с самым высоким рейтингом, и он все еще не работает :
Font
Папки должны быть на том же уровне, что и папку CSS. Исправление пути вbootstrap.css
не будет работать.Bootstrap.css
должен перейти кFonts
папке точно так:источник
css
папка должна быть подпапкой папки, содержащей ваш HTML-файл. Таким образом, как минимум, вы должны иметь 1) ваш HTML-файл, 2) файл CSS в подпапке с именемcss
и 3) файлы шрифтов в подпапке с именемfonts
.//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
решил это для меня.Если другие решения не работают, вы можете попробовать импортировать глифы из внешнего источника, а не полагаться на Bootstrap, чтобы сделать все за вас. Сделать это:
Вы можете сделать это в HTML:
Или CSS:
Кредит на edsiofi из этой темы: Bootstrap 3 Glyphicons CDN
источник
В случае, если кто-то еще оказался здесь и использовал Bootstrap> = v4.0: поддержка глификонов прекращена
Соответствующая часть из заметок о выпуске:
Источник: https://v4-alpha.getbootstrap.com/migration/#components
Если вы хотите использовать глифы, вам нужно скачать их отдельно.
Я лично попробовал Font Awesome, и это довольно хорошо. Добавление иконок похоже на глипикон:
источник
Я просматривал этот старый вопрос и, поскольку то, что должно было быть правильным до сих пор, было дано мною в комментариях, думаю, я также заслуживаю похвалы за него.
Проблема заключалась в том, что файлы шрифтов glyphicon, загружаемые из инструмента настройщика bootstrap, не совпадали с теми, которые загружаются из перенаправления, найденного на домашней странице bootstrap. Те, которые работают должным образом, могут быть загружены по следующей ссылке:
Любой, у кого есть проблемы со старыми плохими файлами настройщика, должен перезаписать шрифты по ссылке выше.
источник
application/vnd.ms-fontobject
- .eot -application/x-font-woff
- .woff -application/x-font-ttf
- .ttf -image/svg+xml
- .svgНа веб-сайтах Azure отсутствует конфигурация woff MIME. Вы должны добавить следующую запись в web.config
источник
woff, woff2 and ttf
расширения?Как описано в @Stijn,
Bootstrap.css
при установке этого пакета из папки по умолчанию используется неверное расположениеNuget
.Измените этот раздел, чтобы он выглядел так:
источник
Вы можете добавить эту строку кода и готово.
Спасибо.
источник
IIS
.woff
по умолчанию не будет обслуживать файлы, поэтому в IIS вам нужно добавить<mimeMap>
запись в вашweb.config
файл;источник
У вас есть все файлы ниже в вашем каталоге шрифтов
источник
Я изменил свой файл без переменных. Я изменил переменную
оригинал был
Это вызывало проблему
источник
$icon-font-path: "/assets/bootstrap/"
.Это связано с неправильным кодированием в bootstrap.css и bootstrap.min.css. При загрузке Bootstrap 3.0 из настройщика отсутствует следующий код:
Так как это основной код для использования Glyphicons, он не будет работать ...
Скачайте css-файлы из полного пакета, и этот код будет реализован.
источник
Это было причиной, почему значки не показывались для меня:
После того, как я удалил эту часть своей
CSS
, все заработало как надо. Важным был тот, который вызывал проблемы.источник
Другая проблема / решение может иметь этот код Bootstrap 2.x:
и при миграции на основе руководства (
.icon-* ---> .glyphicon .glyphicon-*
):Вы забыли добавить класс значков (содержащий ссылку на шрифт):
источник
Ниже то, что исправило это для меня. Я получал ошибку "плохой 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.Мы нашли, что
$bootstrap-sass-asset-helper
былоfalse
во время резолюции, когда мы ожидали, что это будет правдой, поэтому путь был другим.Мы вызвали
$bootstrap-sass-asset-helper
инициализацию в gem движка, выполнив:например, это привело к разрешению пути к:
Опять же, это не должно быть необходимо в любом обычном проекте rails
bootstrap-sass
, просто случается так, что мы повторно используем множество представлений, и это сработало для нас. Надеюсь, это может помочь кому-то еще.источник
Вот что говорится в официальной документации относительно не рендеринга шрифтов.
Кроме этого может быть, что вы пропустили, чтобы скопировать папку шрифтов в корневой каталог
источник
У меня была эта проблема, и она была вызвана файлом variables.less. Переопределение его для установки значения icon-font-path решило проблему.
Структурированный файл выглядит так:
Добавление моего собственного файла variables.less в корень содержимого и ссылка на него в styles.less устраняет ошибку 404.
Variables.less содержит:
источник
Я получил Bootstrap от NuGet. Когда я опубликовал свой сайт, глифы не работали.
В моем случае я заработал, настроив действие «Сборка» для каждого из файлов шрифтов на «Содержимое» и установил для них «Всегда копировать».
источник
у меня был код ширины коробки \ e094 для glyphicon-arrow-down, фактически я решил проблему добавления глификона в класс css следующим образом:
если бы это могло помочь кому-то ...
источник
Убедитесь, что вы не слишком много указали семейство шрифтов, например
удалит шрифт халфлингов из элементов i.
источник
У меня возникла та же проблема, когда браузер не смог найти файлы шрифтов, и моя проблема была связана с исключениями из моего файла .htaccess, который содержал файлы из белого списка, которые не следует отправлять
index.php
на обработку. Поскольку файл шрифта не мог быть загружен, символы были заменены BLOB.Как вы можете видеть, такие файлы, как images, rss и xml, исключаются из перезаписи, но файлы шрифтов
.woff
и.woff2
файлы, поэтому их также необходимо добавить в белый список.Добавление
woff
иwoff2
в белый список позволяет загружать файлы шрифтов, и глифы должны отображаться правильно.источник
Вы должны установить этот порядок:
источник
Для меня сработала замена маршрутов из:
в
источник
Вот как вы включаете значок в начальной загрузке 3
http://glyphicons.bootstrapcheatsheets.com/
Надеюсь, это поможет.
источник
Я использую начальную загрузку с пространством имен и глификонами, которые не работают, но после добавления указанной выше строки в коде глификоны работают нормально.
источник
Я просто переименовал шрифт из bootstrap.css, используя Ctrl + c, Ctrl + v, и это сработало.
источник