Як видалити помилку щодо glyphicons-halflings-regular.woff2 не знайдено

Додаток ASP.NET MVC4 Bootstrap 3 запускається з Microsoft Visual Studio Express 2013 для Web 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. Ця помилка завжди виникає під час запуску програми.

Ця проблема трапляється через те, що 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меню:

Крок 3: Посередині екрана з'являється вікно, і в цьому вікні потрібно додати два рядки з рішення 1:

У моєму випадку я щойно завантажив відсутній файл безпосередньо звідси: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Додайте цей у свій html, якщо у вас є доступ лише до html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

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

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

Іншими словами, мій шлях до пучка був на один каталог занадто глибоким. Я перейменував його на "~/bundles/siteCss"та оновив усі посилання на нього, які я знайшов у своєму проекті. Тепер bootstrap шукав "~/fonts"файли гліфікону, які працювали. Проблема вирішена.

До того, як я вирішив другу проблему вище, жоден з glyphiconфайлів шрифтів не завантажувався. Симптом полягав у тому, що всі випадки glyphiconгліфів у проекті просто показували порожнє поле. Однак цей симптом спостерігався лише у розгорнутих версіях веб-програми, а не на моїй машині розробника. Я досі не впевнений, чому так було.

Я спробував усі наведені вище пропозиції, але моєю фактичною проблемою було те, що моя програма шукала папку / шрифт та її вміст (.woff тощо) у програмі / шрифти, але папка / шрифти була на тому самому рівні, що і / app. Я перемістив / шрифти під / app, і зараз він працює нормально. Сподіваюсь, це допоможе комусь іншому, хто блукає в Інтернеті, щоб отримати відповідь.

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

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