Бутстрап 3 не удается отобразить glyphicon правильно

вы выбрали настроенную версию 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 теперь отделены от bootstrap. вот скрипка, которая из другого ответа 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. найти безопасности.филеури.strict_origin_policy свойство и изменить его с 'true' на ' false.-
3. вуаль! вы хорошо идти!

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

вы только увидеть эту проблему при доступе к файлу с помощью file: / / / protocol

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

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

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

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

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

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

Я в конечном итоге переход на шрифт потрясающие иконки. Они так же хороши, если не лучше, и все, что вам нужно сделать, это ссылка в шрифте, счастливые дни.

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

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

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

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

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

надеюсь, что это помогает

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

Я был возникли проблемы с технологии glyphicons не показывает либо, а также вопросы с макетом навигации.

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

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

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

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

в основном шрифты папка должна быть в Родительском каталоге bootstrap.файл CSS.

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

ошибка уже была решена с помощью bootstrap

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

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

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

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