Como remover o erro sobre glyphicons-halflings-regular.woff2 não encontrado

95

O aplicativo ASP.NET MVC4 Bootstrap 3 está em execução no Microsoft Visual Studio Express 2013 para Web IDE.

O console do Chrome mostra sempre erros

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

Este arquivo existe no diretório de fontes no Gerenciador de Soluções. A ação de construção é definida como "Conteúdo" e Copiar para o diretório de saída é "Não copiar como em outros arquivos de fonte". O Bootstrap 3 é adicionado à solução usando NuGet. Como corrigir isso para que esse erro não ocorra? O aplicativo mostra os ícones Glyphicon e FontAwesome corretamente. Este erro sempre ocorre na inicialização do aplicativo.

— Andrus
fonte

238

Este problema acontece porque o IIS não sabe sobre woffe woff2tipos de arquivo MIME.

Solução 1:

Adicione estas linhas em seu projeto 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>

Solução 2:

Na página do projeto IIS:

Etapa 1: Vá para a página inicial do IIS do seu projeto e clique duas vezes no MIME Typesbotão:

Etapa 2: Clique no Addbotão do Actionsmenu:

Passo 3: No meio da tela aparece uma janela e nesta janela você precisa adicionar as duas linhas da solução 1:

— TotPeRo
fonte

Isso resolveu para mim, mas por quê? Eu apreciaria uma explicação de por que a solução funciona mais do que apenas copiar e colar sem pensar o código fornecido.

— Bpainter

3

@Bpainter A primeira linha desta resposta explica por quê. Os tipos MIME não estão associados a um tipo, portanto, não são carregados pelo navegador. Por que um navegador não carrega um arquivo do tipo MIME não associado? Acho que é uma questão separada para a qual não sei a resposta.

— Camille Sévigny

4

@CamilleSévigny Acredito que a resposta à sua pergunta é que o IIS só disponibiliza tipos de arquivos válidos, portanto, como não reconhece as extensões .woff e .woff2, responde às solicitações desses arquivos com 404 - não encontrado.

— Grungondola

@CamilleSévigny Obrigado, quando fiz esse comentário, a primeira linha não estava lá. Foi editado após o fato. Sem o seu comentário, eu nunca teria visto.

— Bpainter

No meu caso o problema era o CssRewriteUrlTransform que usei no Bundle de bootstrap e Font-Awesome. Se você preservar sua estrutura de pastas normal, não há necessidade de usar esta opção.

— g_brahimaj

47

No meu caso, acabei de baixar o arquivo ausente diretamente aqui: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

— Reza Mamun
fonte

7

resolveu para mim. Obrigado. Baixei os arquivos e salvei a pasta de fontes no diretório do meu projeto. Arquivos CSS na pasta "css", fontes na pasta "fonts"

— CyprUS

1

Às vezes, as soluções são bem simples e não temos conhecimento de:) Thnx para a solução, eu perdi isso na minha fontspasta no meu aplicativo

— MVC5

6

Adicione este ao seu html se você só tiver acesso ao html:

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

— FMF
fonte

Obrigado, esta solução funcionou para mim. Mas, adicionar a tag <staticContent> no web.config desta forma - stackoverflow.com/questions/46508793/… - não funcionou para mim.

— BUDDHIKA

5

Para mim, o problema era duplo: primeiro, a versão do IIS com a qual eu estava lidando não sabia sobre o .woff2tipo MIME, apenas sobre .woff. Corrigi isso usando o Gerenciador do IIS no nível do servidor, não no nível do aplicativo web, para que a configuração não fosse substituída a cada nova implantação de aplicativo. (No Gerenciador do IIS, fui para os tipos de MIME, adicionei o que faltava .woff2e atualizei .woff.)

Em segundo lugar, e mais importante, eu estava agrupando bootstrap.cssalguns outros arquivos como "~/bundles/css/site". Enquanto isso, meus arquivos de fontes estavam disponíveis "~/fonts". bootstrap.cssprocura as fontes de glifício em "../fonts", que foram traduzidas para "~/bundles/fonts"- caminho errado.

Em outras palavras, meu caminho de pacote era um diretório muito profundo. Mudei o nome para "~/bundles/siteCss"e atualizei todas as referências a ele que encontrei em meu projeto. Agora o bootstrap procurou "~/fonts"os arquivos de glifo, que funcionou. Problema resolvido.

Antes de corrigir o segundo problema acima, nenhum dos glyphiconarquivos de fonte estava carregando. O sintoma era que todas as instâncias de glyphiconglifos no projeto mostravam apenas uma caixa vazia. No entanto, esse sintoma ocorreu apenas nas versões implantadas do aplicativo web, não na minha máquina de desenvolvimento. Ainda não tenho certeza de por que foi esse o caso.

— Stephen G Tuggy
fonte

3

Tentei todas as sugestões acima, mas meu problema real era que meu aplicativo estava procurando pela pasta / font e seu conteúdo (.woff etc) em app / fonts, mas minha pasta / fonts estava no mesmo nível que / app. Mudei / fonts em / app e agora funciona bem. Espero que isso ajude alguém a percorrer a web em busca de uma resposta.

— cirl
fonte

1

Esse problema ocorre porque o IIS não encontra o local real dos tipos MIME do arquivo woff2. Defina o URL da face da fonte corretamente, também mantenha a família da fonte como glyphicons-halflings-regular em seu arquivo CSS, conforme mostrado abaixo.

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

— Diwas Poudel
fonte