Fontawesome non funziona quando servito da IIS

StackOverflow https://stackoverflow.com//questions/23007250

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.

È stato utile?

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">
.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top