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

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

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

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

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

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

-Если вы последовали за ответом с наивысшей оценкой, но он по-прежнему не работает:

Папка 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="//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>

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

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

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> 

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

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

Спасибо.

Как описано в @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 файл;

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

Я изменил свой файл less variables.less Я изменил переменную

@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/bootstrap/_glyphicons.scss.

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

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

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

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

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

Changing the icon font location Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways: Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Utilize the relative URLs option provided by the Less compiler. Change the url() paths in the compiled CSS. Use whatever option best suits your specific development setup.

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

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

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

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

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

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

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

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

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

У меня был код ширины поля \ e094 для glyphicon-arrow-down, на самом деле я решил проблему, добавив glyphicon в класс 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]

Как видите, такие файлы, как изображения, 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');
}

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

Вот как вы включаете значок в 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.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>

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

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

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

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

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

Если вы используете CDN для файлов начальной загрузки CSS, это может быть причиной, поскольку файлы глифов (например, glyphicons-halflings-regular.woff) также берутся из CDN.

В моем случае я столкнулся с этой проблемой, используя CDN Microsoft, но переключился на MaxCDN решил это.

У меня возникла эта проблема при использовании веб-фрагмента в Eclipse. Файлы шрифтов были повреждены при упаковке в jar веб-фрагмента. Копирование файлов шрифтов в проект, где использовался фрагмент, решило проблему.

Ни один из предыдущих ответов не работает для меня ....

Проблема заключалась в том, что я пытался <span class="icones glyphicon glyphicon-pen"> и через час понял, что этот значок не был включен в пакет Bootstrap! Пока иконка конверта работала нормально ..

Убедитесь, что это glyphicons-halflings-regular.woff, а не glyphiconshalflings-regular.woff

Если вы используете Visual Studio (в моем случае 2015) для создания веб-приложения ASP.NET Webforms с темами Bootstrap, по умолчанию глификоны хранятся в папке / fonts вне корня проекта.

Если вы начнете переупорядочивать файлы начальной загрузки в / Content по подпапкам (например, для поддержки нескольких тем), все ссылки в начальной загрузке на ../fonts/ будут повреждены. Вы можете либо переместить папку шрифтов в соответствующий относительный путь в /Content, либо переименовать все ссылки с ../fonts на /fonts.

Загрузите полный / не настроенный пакет с этого сайта и замените файл шрифтов ненастроенными пакетами шрифтов. Его будет исправлено.

Мне пришлось создать некоторые условия перезаписи, чтобы разрешить их:

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)

Я работаю с VS2015, ASP.NET MVC 6 (RC), а также имел проблемы (сообщения об ошибках в ссылке, значки не отображались) с глипиконами в производстве (где он работал в VS (разработка) ).
Причина, по-видимому, в том, что страница MS cdn не работает (по крайней мере, сейчас и из Швейцарии): http://www.websitedown.info/ajax.aspnetcdn.com

Поэтому (в качестве временного решения) я изменил внешнюю ссылку в _Layout.cshtml (в разделе environment names = "Staging, Production") на "внутреннюю" ссылку:
с:

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"

to

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"

После этого он снова работает.

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

Но проблема была решена только после того, как я установил "glyphicons-halflings-regular.ttf". Я начал правильно отображать значки в пользовательском интерфейсе.

Я работаю с Angular2 и SCSS, поэтому я скопировал в свой проект только те файлы начальной загрузки, которые я изменяю, остальные импортируются из node_modules .. единственная проблема была с Glyphicons. После многих попыток я обнаружил, что лучшим решением для меня является копирование файлов шрифтов в мой проект и прямая установка этого пути на $ icon-font-path, как показано на изображении:

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

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

Должно было

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

Я искал эти файлы на своем жестком диске

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

затем скопировал их в файл шрифта в моем проекте .net

Если вы используете CDN, убедитесь, что вы используете ссылку CDN для последней версии. Я использовал ссылку CDN для предыдущей версии и пытался добавить новые значки, которые я нашел на веб-сайте (который содержит значки для последней версии), и, следовательно, они не отображались на веб-странице. Может помочь изменение ссылки cdn на последнюю версию.

Проблема, с которой я столкнулся, была связана с преобразованием Mac / PC. Я получил шаблон от наших разработчиков MAc, в котором были изображения, шрифты, глификоны и все остальное, о чем вы можете подумать. Проблема может быть замечена, когда вы загружаете файлы на ПК. По умолчанию имена файлов будут зелеными. Значит, работать они не будут. Вы получите необработанный HTML с битыми ссылками.

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

Удачи.

Похоже, проблема с символом UTF в вашем CSS. Просто обновите свой файл начальной загрузки css новым.

Если вам, например, нужен значок glyphicon-chevron-left

Попробуйте добавить class="glyphicon glyphicon-chevron-left"