Как убрать ошибку про глификоны-халфлинги-regular.woff2 not found

Приложение ASP.NET MVC4 Bootstrap 3 запускается из Microsoft Visual Studio Express 2013 для веб-среды IDE.

Консоль Chrome всегда показывает ошибку

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Этот файл существует в каталоге шрифтов в обозревателе решений. Действие сборки установлено на «Содержимое», а «Копировать в выходной каталог» - на «Не копировать, как в других файлах шрифтов». Bootstrap 3 добавляется в решение с помощью NuGet. Как это исправить, чтобы не возникала эта ошибка? Приложение правильно отображает значки Glyphicon и FontAwesome. Эта ошибка всегда возникает при запуске приложения.


visual-studio twitter-bootstrap asp.net-mvc asp.net-mvc-4 glyphicons
person Andrus    schedule 30.08.2015    source источник

Ответы (6)


arrow_upward
244
arrow_downward

Эта проблема возникает из-за того, что IIS не знает о MIME-типах файлов woff и woff2.

Решение 1.

Добавьте эти строки в свой проект web.config:

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

Решение 2:

На странице проекта IIS:

Шаг 1. Перейдите на домашнюю страницу IIS своего проекта и дважды нажмите кнопку MIME Types:

«Шаг

Шаг 2: Нажмите кнопку Add в меню Actions: Шаг 2

Шаг 3: В середине экрана появляется окно, в которое вам нужно добавить две строки из решения 1: Шаг 3

person TotPeRo    schedule 30.08.2015
comment
Это решило проблему для меня, но почему? Я был бы признателен за объяснение того, почему решение работает больше, чем просто бездумное копирование / вставка предоставленного кода. - person Bpainter; 02.12.2015
comment
@Bpainter В первой строке этого ответа рассказывается, почему. Типы MIME не связаны с типом, поэтому они не загружаются браузером. Почему браузер не загружает несвязанный файл MIME-типа? Думаю, это отдельный вопрос, на который я не знаю ответа. - person Camille Sévigny; 15.12.2015
comment
@ CamilleSévigny Я считаю, что ответ на ваш вопрос заключается в том, что IIS делает доступными только допустимые типы файлов, поэтому, поскольку он не распознает расширения .woff и .woff2, он отвечает на запросы этих файлов с кодом 404 - не найдено. - person Grungondola; 21.12.2015
comment
@ CamilleSévigny Спасибо, когда я сделал этот комментарий, первой строчки там не было. Это было отредактировано постфактум. Хотя без вашего комментария я бы никогда этого не увидел. - person Bpainter; 22.12.2015
comment
В моем случае проблема заключалась в CssRewriteUrlTransform, который я использовал в Bundle of bootstrap и Font-Awesome. Если вы сохраните их обычную структуру папок, нет необходимости использовать эту опцию. - person g_brahimaj; 16.11.2016
comment
Текущие стандартные типы MIME - это application/font-woff и font/woff2, см. w3.org/TR/WOFF/ # appendix-b и w3.org/TR/WOFF2/#IMT - person Sacha K; 02.03.2018

arrow_upward
52
arrow_downward

В моем случае я только что загрузил недостающий файл прямо отсюда: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

person Reza Mamun    schedule 25.02.2016
comment
решил это за меня. Спасибо. Я загрузил файлы и сохранил папку шрифтов в каталоге своего проекта. Файлы CSS в папке css, шрифты в папке шрифтов - person CyprUS; 06.07.2016
comment
Иногда решения довольно простые, и мы не знаем о них :) Спасибо за решение, я пропустил это в моей папке fonts в моем приложении MVC5 - person Irfan; 29.06.2017

arrow_upward
9
arrow_downward

Добавьте это в свой html, если у вас есть доступ только к html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
person F.M.F.    schedule 11.09.2017
comment
Спасибо, это решение сработало для меня. Но, добавив тег ‹staticContent› в web.config в соответствии с этим - stackoverflow.com/questions/46508793/ - у меня не сработало. - person BUDDHIKA; 11.06.2019

arrow_upward
5
arrow_downward

Для меня проблема была двоякой: во-первых, версия IIS, с которой я имел дело, не знала о .woff2 типе MIME, только о .woff. Я исправил это с помощью диспетчера IIS на уровне сервера, а не на уровне веб-приложения, поэтому параметр не переопределялся при каждом развертывании нового приложения. (В диспетчере IIS я перешел к типам MIME и добавил недостающие .woff2, а затем обновил .woff.)

Во-вторых, что более важно, я объединял bootstrap.css вместе с некоторыми другими файлами как "~/bundles/css/site". Между тем мои файлы шрифтов были в "~/fonts". bootstrap.css ищет шрифты глификона в "../fonts", которые переведены как "~/bundles/fonts" - неправильный путь.

Другими словами, мой путь к пакету был на один каталог слишком глубоким. Я переименовал его в "~/bundles/siteCss" и обновил все ссылки на него, которые я нашел в моем проекте. Теперь программа начальной загрузки искала "~/fonts" файлы глификонов, которые работали. Проблема решена.

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

person Stephen G Tuggy    schedule 31.12.2018

arrow_upward
3
arrow_downward

Я попробовал все приведенные выше предложения, но на самом деле моя проблема заключалась в том, что мое приложение искало папку / font и ее содержимое (.woff и т. Д.) В app / fonts, но моя папка / fonts была на том же уровне, что и / app. Я переместил / fonts в / app, и теперь он отлично работает. Надеюсь, это поможет кому-нибудь еще в поисках ответа в Интернете.

person cirl    schedule 16.10.2017

arrow_upward
2
arrow_downward

Эта проблема возникает из-за того, что IIS не находит фактическое расположение файлов mime-типа woff2. Правильно установите URL-адрес font-face, также оставьте font-family как glyphicons-halflings-regular в вашем файле CSS, как показано ниже.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
person Diwas Poudel    schedule 16.08.2019