Fontawesome não funciona quando servido pelo IIS
-
21-12-2019 - |
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.
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">