Come rimuovere l'errore su glyphicons-halflings-regular.woff2 non trovato

95

L'applicazione ASP.NET MVC4 Bootstrap 3 viene eseguita da Microsoft Visual Studio Express 2013 per Web IDE.

La console Chrome mostra sempre un errore

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

Questo file esiste nella directory dei caratteri in Esplora soluzioni. L'azione di compilazione è impostata su "Contenuto" e Copia nella directory di output è "Non copiare come in altri file di caratteri". Bootstrap 3 viene aggiunto alla soluzione usando NuGet. Come risolvere questo problema in modo che questo errore non si verifichi? L'applicazione mostra correttamente le icone Glyphicon e FontAwesome. Questo errore si verifica sempre all'avvio dell'applicazione.

— Andrus
fonte

238

Questo problema si verifica perché IIS non sa nulla woffe woff2tipi di file MIME.

Soluzione 1:

Aggiungi queste righe nel tuo progetto 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>

Soluzione 2:

Nella pagina del progetto IIS:

Passaggio 1: vai alla home page IIS del tuo progetto e fai doppio clic sul MIME Typespulsante:

Passaggio 2: fare clic sul Addpulsante dal Actionsmenu:

Passaggio 3: Al centro dello schermo appare una finestra e in questa finestra è necessario aggiungere le due linee dalla soluzione 1:

— TotPeRo
fonte

Questo mi ha risolto, ma perché? Apprezzerei una spiegazione del motivo per cui la soluzione funziona più di una semplice copia / incolla insensata del codice fornito.

— Bpainter

3

@Bpainter La prima riga di questa risposta ti dice perché. I tipi MIME non sono associati a un tipo, quindi non vengono caricati dal browser. Perché un browser non carica un file di tipo MIME non associato? Penso che sia una domanda separata a cui non conosco la risposta.

— Camille Sévigny,

4

@ CamilleSévigny Credo che la risposta alla tua domanda sia che IIS rende disponibili solo tipi di file validi, quindi poiché non riconosce le estensioni .woff e .woff2, risponde alle richieste di questi file con 404 - non trovato.

— Grungondola

@ CamilleSévigny Grazie, quando ho fatto quel commento, la prima riga non c'era. È stato modificato dopo il fatto. Senza il tuo commento però non l'avrei mai visto.

— Bpainter

Nel mio caso il problema era il CssRewriteUrlTransform che ho usato nel Bundle di bootstrap e Font-Awesome. Se conservi la loro normale struttura di cartelle, non è necessario utilizzare questa opzione.

— g_brahimaj

47

Nel mio caso, ho appena scaricato il file mancante direttamente da qui: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

— Reza Mamun
fonte

7

risolto per me. Grazie. Ho scaricato i file e salvato la cartella dei caratteri nella directory del mio progetto. File CSS nella cartella "css", caratteri nella cartella "fonts"

— CyprUS

1

A volte le soluzioni sono piuttosto semplici e non siamo a conoscenza di fonts:) Thnx per la soluzione, mi mancava questo nella mia cartella nella mia app

— MVC5

6

Aggiungi questo al tuo html se hai accesso solo all'html:

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

— FMF
fonte

Grazie, questa soluzione ha funzionato per me. Ma l'aggiunta del tag <staticContent> in web.config come per questo - stackoverflow.com/questions/46508793/… - non ha funzionato per me.

— BUDDHIKA

5

Per me, il problema era duplice: primo, la versione di IIS con cui avevo a che fare non conosceva il .woff2tipo MIME, ma solo .woff. L'ho risolto utilizzando Gestione IIS a livello di server, non a livello di app Web, in modo che l'impostazione non venisse sovrascritta con ogni nuova distribuzione dell'app. (In Gestione IIS, sono passato ai tipi MIME e ho aggiunto quelli mancanti .woff2, quindi aggiornato .woff.)

In secondo luogo, e ancora più importante, stavo raggruppando bootstrap.cssinsieme ad altri file come "~/bundles/css/site". Nel frattempo, i miei file di font erano in formato "~/fonts". bootstrap.csscerca i caratteri glyphicon in "../fonts", che sono stati tradotti in "~/bundles/fonts"- percorso sbagliato.

In altre parole, il percorso del mio bundle era una directory troppo profonda. L'ho rinominato e ho "~/bundles/siteCss"aggiornato tutti i riferimenti ad esso che ho trovato nel mio progetto. Ora bootstrap ha cercato "~/fonts"i file glyphicon, che ha funzionato. Problema risolto.

Prima di risolvere il secondo problema sopra, nessuno dei glyphiconfile dei caratteri veniva caricato. Il sintomo era che tutte le istanze di glyphiconglifi nel progetto mostravano solo una casella vuota. Tuttavia, questo sintomo si è verificato solo nelle versioni distribuite dell'app Web, non sulla mia macchina di sviluppo. Non sono ancora sicuro del perché sia stato così.

— Stephen G Tuggy
fonte

3

Ho provato tutti i suggerimenti sopra, ma il mio vero problema era che la mia applicazione stava cercando la cartella / font e il suo contenuto (.woff ecc.) In app / fonts, ma la mia cartella / fonts era allo stesso livello di / app. Ho spostato / fonts in / app e ora funziona bene. Spero che questo aiuti qualcun altro a vagare sul Web per una risposta.

— cirl
fonte

1

Questo problema si verifica perché IIS non trova la posizione effettiva dei tipi MIME di file woff2. Imposta correttamente l'URL di font-face, mantieni anche la famiglia di font come glyphicons-halfling-regular nel tuo file CSS come mostrato di seguito.

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

— Diwas Poudel
fonte