Не работают иконки бутстрап

Где class-name это название иконки из набора, который можно найти на официальном сайте https://fontawesome.com/icons?d=gallery&m=free.

Иконки можно добавлять в такие элементы как ссылки, кнопки, списки и т.д.

Источник

Значки 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 иконки для сайта (glyphicon)

Приветствую вас, товарищ! Это небольшой гайд по иконкам Bootstrap, а именно GliphIcon. Если кто не знает, то это такие миниатюрные картинки в виде шрифта, которые можно применять в самых различных местах, это кнопки, списки, текст и и очень красиво смотрятся сайты, сделанные на Bootstrap. Тем более, что все это бесплатно, от вас требуются только знания HTML и CSS. Но если вы здесь, то они у вас наверняка уже имеются. Имеется документация на русском языке, и все бы ничего, но есть одна проблема, она очень криво написана, и новичкам трудно что-то разобрать из написанного. В частности речь идет о bootstrap glyphicons. Ну посмотрите сами:

Нам предлагают реализовать Bootstrap стили GliphIcon на странице таким образом:

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

Как подключить GlyphIcons

Если вы уже скачали папку Bootstrap, то, как вы знаете, в ней находятся еще 3, это CSS, Fonts и JS. Загружаем ее к себе на сервер. Совершенно не важно в какую директорию вы ее положите, но делайте так, чтобы было логично и понятно. Правильно будет разместить ее в файлах шаблона сайта. Теперь подключаем таблицу:

Самое главное — это прописать правильный путь. В примере указан относительный, но вы можете указать абсолютный. И этого уже достаточно для того, чтобы иконки Bootstrap GlyphIcons начали отображаться на страницах. Правильным будет вот такое написание:

И вот несколько вариантов исполнения:

Так, как они являются шрифтом, то их легко можно увеличить, задав параметры CSS font-size или поменять цвет:

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

Bootstrap кнопки с иконками GliphIcons