Bootstrap не работает icon

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

Я мигрирую из bootstrap 2.3 в bootstrap 3, и все работает хорошо. Но когда я попытался добавить некоторые значки, шрифт значка не отображается должным образом. Я попытался посмотреть сюда http://bootply.com/61521 и только ‘.glyphicon-конверт был отображались должным образом. Другие отображаются как «E001» и так далее.

Как я могу решить эту проблему?

для других браузеров глифики отображаются правильно, только firefox был недоступен покажите его правильно.

14 ответов:

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

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

например @icon-font-path: «шрифты/»;

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

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

значки и css теперь отделены от bootstrap. вот скрипка, которая из другого ответа stackoverflow

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

1. открыть about: config в firefox
2. найти безопасности.филеури.strict_origin_policy свойство и изменить его с ‘true’ на ‘ false.-
3. вуаль! вы хорошо идти!

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

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

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

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

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

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

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

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

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

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

например, я просто попытался и через час я понял, что этот значок не был включен в пакет 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

Источник

Значки Bootstrap не отображаются в опубликованном приложении ASP.NET MVC

— NB: перейдите к разделу EDITED 2 для резюме —-

У меня есть приложение ASP.NT MVC (4). Я включил (twitter) Bootstrap к нему. Bootstrap работает отлично, но значки не отображаются правильно при публикации приложения.

Я попытался переиздать приложение без успеха.

Для пояснения я помещаю здесь несколько изображений.

Когда я запускаю свое приложение из VS2013, результат получается (это нормально):

В стенде, IE и Chrome.

Но когда я запускаю опубликованное приложение, результатом является это (что НЕ нормально):

Эта проблема должна каким-то образом быть с оцененным CSS, но я не знаю, в какой момент это может произойти.

Оцененный css в локальном приложении — это (это нормально):

Но в опубликованном приложении у меня есть это (что НЕ нормально):

Кто-то испытал это поведение?

Что я могу сделать для решения этой странной проблемы?

Я получаю файлы шрифтов ( .eot , .svg , .ttf и .woff ) для включения при публикации моего приложения. Когда я получаю доступ к странице по умолчанию (корневой каталог приложения http://localhost/ ), который является страницей, на которой отображаются значки, файлы, отображаемые на вкладке «Инструменты разработчика Chrome»:

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

Хотя, значки отображаются неправильно.

Хорошо, я перезапускаю свой сайт в IIS 7. И запуск запроса запускается. Это запросы файлов, показанные на вкладке «Сеть разработчиков Chrome»:

Затем Resquest ищет файлы в: /Content/themes/fonts/ , но они находятся в: /Content/themes/base/fonts/

В папке base содержится папка bootstrap , которая содержит файл bootstrap.css . В файле CSS есть этот класс, ссылающийся на файлы шрифтов:

Кажется, что ссылки на файлы шрифтов хороши, так как это дерево файлов:

Я мог бы изменить класс:

Но я бы действительно знал, что это происходит и как его решить! Кроме того, значки будут отображаться на опубликованном сайте, но не на локальном сайте (работает от VS2013 с iisexpress). Заранее благодарю вас за помощь!

ОТВЕТЫ

Ответ 1

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

В вашем файле BundleConfig.cs создайте свой пакет с помощью CssRewriteUrlTransform:

Включить в _Layout.cshtml:

Все должно быть хорошо. И да, просмотр того, что происходит по сети, чтобы увидеть, какой URL-адрес генерирует 404s, поможет.

Ответ 2

IIS не знает, как обрабатывать (обслуживать) эти файлы (MIME).

Добавьте это в свой файл system.webServer node в файле web.config, и вы станете золотым:

— Отредактировано, см. Ryans и мои комментарии ниже: Еще лучше, чтобы быть в безопасности, удалите и добавьте отображение типа mime:

Ответ 3

Попробуйте отключить оптимизацию пакетов, что происходит, так это то, что путь к связанной таблице CSS css конфликтует с изображениями, на которые делается ссылка. Например. У вас может быть файл css /Content/css/style.css = > в комплекте «

/Content/css» в котором изображение указано как таковое

Это разрешит изображение в /Content/css/img/someimg.png

Теперь вы развертываете сборку релизов, а файл css теперь отображается на URL-адрес пакета, такой как /Content/CSS Теперь URL-адрес изображения разрешает /Content/img/someimg.png

Вы можете изменить это поведение в App_Start\BundleConfig.cs

Ответ 4

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

Также убедитесь, что опубликованный сайт содержит файлы

Различия, которые вы видите в вычисленных правилах CSS, из-за миниатюрных CSS файлов (контролируемых параметром debug=true/false в файле web.config). Значение \e013 — это еще один способ записи символа, который вы видите.

Ответ 5

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

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

Это может быть проблема с mimetype. Инструменты Chrome dev отображают загруженные шрифты на вкладке сети:

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

Обновить

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

Ответ 6

Решение от igorludi должно работать нормально.

И я думаю, мы можем сказать, что IIS обрабатывает этот «новый» ТИП MIME:

Перейдите в IIS → MIME Types;

Добавляет новое расширение и тип (см. XML на ответ igorludi).

Ответ 7

Включение этой строки в файл RegisterBundles() в файле BundleConfig.cs для меня.

Ответ 8

Убедитесь, что расширение .woff добавлено правильно в IIS MIME Типы вашего сайта, чтобы избавиться от возможных ошибок 404.

Исправить проблемы кэширования, удалив следующие строки web.config, потому что Internet Explorer, похоже, не нравится:

Ответ 9

У меня также была проблема с MVC 5 и Bootstrap v3.3.6.

Вам необходимо обновить @icon-font-path в файле Content/bootstrap/variables.less от «../fonts/»; до «/Content/fonts/»;

Ответ 10

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

Ответ 11

попробуйте
и попробуйте @Styles.Render(«

/bootstrap/css») Единственное отличие, которое я нашел

Ответ 12

У меня была та же проблема. Если вы все еще не можете его решить, проблема связана с архивами значков.

В вашем случае ссылка должна быть: «../Content/themes/base/fonts/glyphicons-halflings-regular. «

Наконец, Извините за мой английский, если вы не понимаете, потому что я говорю по-испански, и я просто занимаюсь английским языком.: D

Ответ 13

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

Ответ 14

• выгрузить проект
• отредактируйте файл csproj
• Изменить Ничего не включить в Content Include для соответствующих файлов шрифтов.

Повторно используйте однократное развертывание и публикации файлов.

Ответ 15

Вы должны установить свойство Copy в Output Directory для файлов в Копировать всегда

Ответ 16

добавление: BundleTable.EnableOptimizations = False исправил мою проблему.

Ответ 17

Любой, кто все еще ищет альтернативный ответ, этот метод предлагает другой fooobar.com/info/136426/. , устраняет проблему.

Измените действие Build в файлах .eot,.ttf и .woff на «Содержимое» вместо значения по умолчанию «Нет». Это разрешило мою проблему.

Источник

Bootstrap 3 — Иконки Glyphicons

В этой статье рассмотрим набор шрифтовых иконок, включённых в сборку Bootstrap 3.4.1 по умолчанию. Это набор включает более 250 иконок в формате шрифта из пакета Glyphicon Halflings.

Иконки Glyphicons

Фреймворк Bootstrap 3 включает в себя более 250 иконок в формате шрифта из набора Glyphicons Halflings . Библиотека Glyphicons Halflings не является бесплатной. Но разработчики этих иконок сделали некоторую часть из них доступной для использования в Bootstrap 3.

Четвёртая версия Bootstrap не включает никакие наборы иконок в формате шрифта в свою стандартную поставку. Если они вам нужны, то их придётся подключать самостоятельно.

Стандартные иконки Bootstrap 3 (из набора Glyphicon Halflings)

Как подключить иконки Glyphicons Halflings

В стандартной сборке Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS ( bootstrap.css или bootstrap.min.css ).

Находятся иконки Glyphicons Halflings в каталоге fonts . В данной директории находятся несколько форматов ( eot , svg , ttf , woff , woff2 ) одних и тех же иконок.

Формат eot необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате ttf используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). woff и woff2 – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта ( woff2 ) отличается от первой тем, что она имеет меньший размер. В настоящее время woff2 поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате svg поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла bootstrap.css по вышеприведённой схеме.

Как использовать стандартные иконки в Bootstrap 3

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента span или i , к которому необходимо добавить базовый класс glyphicon и класс определённой иконки (например, иконки телефона — glyphicon-earphone ).

Иконка телефона из набора Glyphicon Halflings

Стилизация иконок в Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Например, для того чтобы изменить цвет иконки, ей необходимо просто задать CSS-свойство color .

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства font-size :

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки «Звездочка» в кнопку выполняется следующим образом:

Не забудьте оставить место между значком и текстом, чтобы обеспечить необходимое расстояние. Например, посредством пробела или специсимвола .

Использование иконки Bootstrap в качестве маркера списка ul.

Чтобы это осуществить необходимо:

1. добавить класс icon к элементу ul ;
2. вставить на страницу фрагмент CSS кода.

Пример, как иконку можно поместить в элемент input:

Как подключить иконки Glyphicons к Bootstrap 4

В Bootstrap 4 нет встроенных шрифтовых иконок. Если хотите в Bootstrap 4 использовать шрифтовые иконки Glyphicons, которые были в Bootstrap 3, то это можно сделать следующим образом.

Во-первых, загрузите папку «fonts» из Bootstrap 3 в Bootstrap 4. Скачать архив Bootstrap 3 можно используя эту ссылку.

Во-вторых, создайте файл, например, «font-glyphicons.css» и поместите в него следующее содержимое. Данные стили нужны для того, чтобы иконки можно было более просто и удобно вставлять на страницу.

В-третьих, подключить файл «font-glyphicons.css» к странице с помощью тега link.

После этого использовать иконки Glyphicons в Bootstrap 4 можно будет также как и в Bootstrap 3:

Источник