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

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.

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:

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

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

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.

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.

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');}