Fontawesome não funciona quando servido pelo IIS

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

Pergunta

FontAwesome não funciona para mim quando coloco meu aplicativo no servidor IIS7.

No Firefox, o URL solicitado é codificado para http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3 e eu recebo 404.Quando eu mudo %3F para ? tudo funciona bem.

A mesma coisa acontece no IE, mas a solicitação vai para a fonte eot.

Isto é o que tenho em CSS (igual à página FontAwesome):

@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;
}

Acho que o problema é que o IIS codifica as URLs e em vez de solicitar ../fonts/fontawesome-webfont.eot? o pedido vai para ../fonts/fontawesome-webfont.eot%3F.

Por favor, não sugira remover '?' ou '#' dos URLs.Eles estão lá de propósito e são essenciais.A questão é como fazer com que o IIS não codifique as URLs dessa maneira.Qualquer pista será apreciada.

Editar:Por falar nisso.a situação acima ocorre quando no web.config eu defino requestValidationMode e requestPathInvalidCharacters:

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />

Sem ele recebo 400 (solicitação incorreta):Um valor Request.Path potencialmente perigoso foi detectado no cliente (?)

Como posso corrigir o IIS para servir a fonte corretamente?

Editar2: OK, encontrei a causa do problema.A ferramenta de empacotamento SquishIt para MVC3 estava mudando esses caracteres.Quando excluo font-awesome.css do pacote, tudo funciona bem.

Foi útil?

Solução 4

A ferramenta de empacotamento SquishIt para MVC3 codificava em URL os caminhos das fontes, então ../fonts/fontawesome-webfont.eot? no arquivo css foi alterado para ../fonts/fontawesome-webfont.eot%3F.Normalmente retorna 400, porque %3F é considerado inseguro.Se você definir requestPathInvalidCharacters="" então %3F é considerado seguro, mas obviamente não há arquivo ``../fonts/fontawesome-webfont.eot%3F`, portanto 404.

Removi fontawesome.css do pacote e tudo funciona bem.

Outras dicas

Por que @font-face está gerando um erro 404 em arquivos woff?

Adicione os tipos MIME no configuração da 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>

Você pode abrir o IIS, apontar para o seu site, em Sessão IIS, selecione Tipos MIME.Depois que a visualização Mime Types for exibida, clique em Adicionar -> Na caixa de diálogo:

  • Extensão do nome do arquivo: .woff
  • Tipos MiME: aplicação/x-font-woff

Clique OK.

Feito.

Esta resposta não é para o problema acima Mas para aqueles que enfrentam erros semelhantes, mas por motivos diferentes, acabam neste tópico.

Eu enfrentei um problema semelhante, mas depois descobri que o IIS estava tentando procurar arquivos woff e eot incríveis na pasta MyIpAddress/fonts/fontawesome-webfont.woof mas eu tinha os arquivos em uma pasta diferente.Movendo o fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff na minha pasta de fontes resolveu meu problema

para mim, apenas adicionar o link bootstrap CDN resolveu o problema

para sua página:

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>

Brincar com o servidor IIS é arriscado, em vez disso tentei outro truque que teve 100% de sucesso.

Passo 1

Renomeie os nomes dos arquivos de fontes adicionando .jpg no final dos arquivos.

fontawesome-webfont.eot.jpg (da mesma forma)

Em seguida, altere os tipos de arquivo nas linhas de renderização da fonte fontawesome.css

 */@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 você estiver usando CodeIgniter no IIS7:

No seu arquivo web.config, adicione uau para o padrão

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

Espero que ajude !

Mudei de woff2 para woff e tudo correu bem.

Se você estiver adicionando FontAwesome por meio de pacote, ele poderá descartar o URL woff2.Veja a seguinte solução em um tópico semelhante onde CssRewriteUrlTransform é usado para retrabalhar o URL:https://stackoverflow.com/a/22700610/746984

Use este cdn em sua página index.html...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top