Bootstrap 3 не может правильно отображать глификон

Хорошо, моя проблема не была решена выше. У меня была папка шрифтов в том же месте, что и папки начальной загрузки css и js (например, / theme / bootstrap3 / ..), но она искала папку шрифтов в корне (например, / fonts / glyph .. .woff)

Решением для меня было установить для переменной @ icon-font-path правильный относительный путь:

Например, @ icon-font-path: "fonts /";

Вы выбрали кастомную версию Bootstrap? Проблема заключается в том, что файлы шрифтов, включенные в настраиваемый пакет, не работают (см. https://github.com/twbs/bootstrap/issues/9925). Если вы не хотите использовать CDN, вам необходимо загрузить их вручную и заменить свои собственные шрифты на загруженные:

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

После этого попробуйте сильную перезагрузку (CTRL + F5), надеюсь, это поможет.

значки и CSS теперь отделены от начальной загрузки. вот скрипка из другого ответа stackoverflow

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");

http://jsfiddle.net/aQrPd/1/

Bootstrap 3 Glyphicons CDN

Вот исправление, которое сработало для меня. Firefox имеет политику происхождения файлов, которая вызывает это. Для исправления выполните следующие действия:

1. открыть about: config в firefox
2. Найдите свойство security.fileuri.strict_origin_policy и измените его с «true» на «false».
3. Voial! вам хорошо идти!

Подробности: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_bolicy_and_and_origin_bolicy_and_and_origin_bolicy_and_and_

У меня была такая же проблема с использованием локального сервера apache. Это решило мою проблему:

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

Для Amazon s3 вам необходимо отредактировать конфигурацию CORS:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

В первую очередь я пытаюсь установить шрифты глификонов "официальным" способом, с помощью zip-файла. Я не мог этого сделать.

Это мое пошаговое решение:

1. Перейдите на веб-страницу Bootstrap, а затем в раздел «Компоненты».
2. Откройте консоль браузера. В Chrome Ctrl + Shift + C.
3. В разделе «Ресурсы» внутри Frames / getbootstrap.com / Fonts вы найдете шрифт, который фактически запускает глификоны. Чтобы избежать кеширования, рекомендуется использовать приватный режим.
4. С URL-адресом файла шрифта (щелкните правой кнопкой мыши файл, отображаемый в списке ресурсов), скопируйте его в новую вкладку и нажмите ENTER. Это загрузит файл шрифта.
5. Скопируйте в другой раз URL-адрес на вкладке и измените расширение шрифта на eot, ttf, svg или woff, как вам нравится.

Однако для более легкого доступа это ссылка на файл woff.

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

В итоге я переключился на Font-Awesome Icons. Они так же хороши, если не лучше, и все, что вам нужно сделать, это добавить ссылку в шрифте, счастливых дней.

убедитесь, что имя папки, содержащей имя шрифта, - «шрифты», а не «шрифт»

вы можете использовать такой тег:

<i class="fa fa-edit"></i>

Так, на всякий случай :

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

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

Как отмечали другие, с настройщиком есть некоторые проблемы.

У меня были проблемы с тем, что глификоны не отображались, а также проблемы с макетом панели навигации.

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

Я также вытащил CDN CSS и javascript вместо моей локальной копии из CDN. Это устранило мои проблемы с навигационной панелью.

Поэтому я рекомендую, пока вы не освоите Bootstrap, не использовать настроенную версию, поскольку вы можете получить разочаровывающие и нежелательные результаты.

Для меня размещение моей папки fonts в соответствии с местоположением, указанным в bootstrap.css, решило проблему.

В основном его папка fonts должна находиться в родительском каталоге файла bootstrap.css.

Я столкнулся с этой проблемой и исследовал множество ответов, если кто-то еще в 2015 году столкнется с этой проблемой, то это либо проблема CSS, либо несоответствие местоположения файлов.

Ошибка уже решена бутстрапом.

Это официальная документация, подтверждающая приведенные выше ответы.

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.

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

1. Попробуйте использовать CDN
2. Попробуйте установить HTTP-заголовок Access-Control-Allow-Origin