Fontawesome non funziona quando servito da IIS
-
21-12-2019 - |
Domanda
Fontawesome non funziona per me quando metto la mia app su IIS7 Server.
In Firefox L'URL richiesto è codificato su http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3
e ottengo 404. Quando cambio %3F
su ?
Tutto funziona bene.
La stessa cosa accade in IE, ma la richiesta va a font EOT.
Questo è ciò che ho in CSS (come su pagina fontante):
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.
Penso che il problema sia che IIS codifica gli URL e invece di richiedere ../fonts/fontawesome-webfont.eot?
La richiesta va a ../fonts/fontawesome-webfont.eot%3F
.
Si prega di non suggerire la rimozione "?" o '#' dagli URL. Sono lì apposta e sono essenziali. La domanda è come rendere IIS per non codificare gli URL in questo modo. Qualsiasi indizio sarà apprezzato.
Modifica : A proposito. La situazione di cui sopra avviene quando in Web.config I impostato RequestValidationMode e RequestPathApractApractActoatteri:
<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />
.
Senza di esso ottengo 400 (cattiva richiesta): Un valore di richiesta potenzialmente pericoloso. Valore del percorso è stato rilevato dal client (?)
Come posso aggiustare IIS per servire il carattere correttamente?
Edit2 : OK, ho trovato la causa del problema. Strumento di raggruppamento SQUHIT per MVC3 stava cambiando quei personaggi. Quando escludo il font-awesome.css dal pacchetto tutto funziona bene.
Soluzione 4
Strumento di bundling SquishIT per MVC3 è stato codifica URL I percorsi dei font, quindi ../fonts/fontawesome-webfont.eot?
nel file CSS è stato modificato in ../fonts/fontawesome-webfont.eot%3F
.Ciò normalmente restituisce 400, perché% 3F è considerato non sicuro.Se hai impostato requestPathInvalidCharacters=""
, quindi% 3F è considerato sicuro, ma ovviamente non è ovviamente nessun file "../ Fonts / Fontawesome-Webfont.eoot% 3F`, quindi 404.
Ho rimosso fontawesome.css dal pacchetto e tutto funziona bene.
Altri suggerimenti
Perché è @ Throwing Face-FaceUn errore 404 sui file woff?
Aggiungi i tipi MIME nella configurazione Web :
<system.webServer>
<staticContent>
<remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>
. Puoi aprire IIS, scegliere il tuo sito web, in Session IIS , selezionare Tipi MIME . Dopo i tipi di MIME Visualizza visualizzazione, fai clic su Aggiungi -> Nel dialogo:
- .
- Estensione del nome del file: .woff
- Tipi MIME: Applicazione / X-Font-Woff
Fare clic su OK.
Fatto.
Questa risposta non è per il problema di cui sopra ma per coloro che affrontano un errore simile ma a causa di diverse ragione e atterrano in questo thread.
Ho affrontato un problema simile ma in seguito ha scoperto che IIS stava cercando di cercare Woff di font-fantastico, file EOT nella cartella MyIpAddress/fonts/fontawesome-webfont.woof
ma ho avuto i file in diverse cartelle.Spostamento del fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff
nella cartella dei font ha risolto il mio problema
Per me aggiungendo solo il collegamento CDN Bootstrap risolto il problema
Per la tua pagina:
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
. Giocare con IIS Sever è rischioso, invece di aver provato un altro trucco che è stato il 100% di successo.
Step 1
Rinominare i nomi dei file dei caratteri aggiungendo .jpg alla fine dei file.
fontawesome-webfont.eot.jpg (allo stesso modo)
Quindi modificare i tipi di file in Fontawesome.css Font Rendering Lines
*/@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');
. Se si utilizza Codeigniter in IIS7:
Nel tuo file web.config, aggiungi woff al motivo
<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>
Spero che aiuti!
Sono cambiato da woff2 a woff e andò avanti bene.
Se stai aggiungendo fontawesome tramite raggruppamento, può buttare fuori l'URL Woff2.Vedere la seguente soluzione su un filo simile in cui CssRewriteUrlTransform
viene utilizzato per rielaborare l'URL:
https://stackoverflow.com/a/22700610/746984
Utilizzare questo CDN nella tua pagina Index.html ...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
.