Font Awesome não funciona, icons mostrando como quadrados

Então, eu estou tentando prototipar uma página de marketing e estou usando o Bootstrap e o novo arquivo Font Awesome. O problema é que quando tento usar um ícone, tudo que é renderizado na página é um grande quadrado.

Aqui está como eu incluo os arquivos na cabeça:

 Page Title       

E aqui está um exemplo de eu tentando usar um ícone:

  

Mas tudo isso é renderizado em um grande quadrado. Alguém sabe o que poderia estar acontecendo?

De acordo com a documentação (etapa 3), você precisa modificar o arquivo CSS fornecido para apontar para o local da fonte em seu site.

Você deve ter 2 classs, a class fa e a class que identifica o ícone desejado fa-twitter , fa-search , etc…

     

Usa isto

  

Eu tive um problema semelhante com o Amazon Cloudfront CDN, mas ele foi resolvido depois que comecei a carregá-lo do maxcdn

Isso pode ajudar, verifique se você não alterou inadvertidamente a família de fonts no ícone. Se você alterou a família de fonts do item .fa de: FontAwesome o ícone não será exibido. É sempre algo bobo e pequeno.

Espero que ajude alguém.

Se você estiver usando LESS ou SASS, abra o arquivo font-awesome.less / sass e edite a variável path @fa-font-path: "../font"; que aponta para as fonts reais:

 @fa-font-path: "../font"; @font-face { font-family: 'FontAwesome'; src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1'); src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; } 

Mesmo com CSS, exceto que você edita o caminho no bloco de declaração @ font-face:

 @font-face { font-family: 'FontAwesome'; src: url('your/path/fontawesome-webfont.eot?v=3.0.1'); src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; } 

Abra seu código font-awesome.css como:

 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

você deve ter pasta como:

 font awesome -> css -> fonts 

ou a maneira mais fácil:

  

Tentei resolver o mesmo problema com algumas soluções anteriores, mas elas não funcionaram na minha situação. Finalmente, adicionei essas duas linhas no HEAD e funcionou:

   

Eu estou usando Font Awesome 4.3.0 apenas ligando de obras maxcdn como mencionado aqui ,

mas para hospedar no seu servidor colocar fonts e css na mesma pasta funcionou para mim, assim

insira a descrição da imagem aqui

então basta ligar o css:

  

Esperança ajuda alguém.

Caso você esteja trabalhando com o Maven e o Apache Wicket, verifique o seguinte para tentar resolver o problema com o Font-Awesome e os icons que não estão sendo carregados:

Se você colocou seus arquivos, por exemplo, na seguinte estrutura de arquivos

 /src /main /java /your /package /css font-awesome.css /font fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.svgz fontawesome-webfont.ttf fontawesome-webfont.woff 

Verificar 1) Você está usando corretamente um Package Resource Guard para poder carregar os arquivos de fonts corretamente?

Exemplo da sua class que estende o WebApplication:

 @Override public void init() { super.init(); get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard()); } 

Verificação 2) Depois de ter certeza de que todas as fonts foram transferidas corretamente para o Navegador da Web, verifique o que foi realmente transferido para o Navegador da Web, ou seja, a integridade dos arquivos de fonts mudou? Compare os arquivos em seu diretório de origem e os arquivos transferidos para o Navegador da Web usando, por exemplo, o Web Developer Toolbar do Firefox e o DiffDog (para comparação de arquivos).

Em particular, se você estiver usando o Maven, esteja ciente da filtragem de resources. Não filtre a pasta onde seus arquivos / font estão contidos – caso contrário, eles serão corrompidos.

Exemplo do seu pom.xml

  Your project   true src/main/resources   false src/main/java  **   **/*.java     

No exemplo acima, não filtramos a pasta src / main / java, onde os arquivos css e font estão contidos.

Para mais informações sobre a filtragem de dados binários, consulte também a documentação:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

Em particular, a documentação adverte: ” Aviso: Não filtre arquivos com conteúdo binário como imagens! Isso provavelmente resultará em saída corrompida. Se você tiver arquivos de texto e binários como resources, precisará declarar dois conjuntos de resources mutuamente exclusivos. O primeiro conjunto de resources define os arquivos a serem filtrados e o outro conjunto de resources define os arquivos a serem copiados inalterados … ”

Eu tive esse problema. O problema era que eu tinha um estilo CSS da família da fonte com! Importante, sobrepondo a fonte fontawesome.

Isso deve ser muito mais simples na nova versão 3.0. Mais fácil é apontar para o Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Se o seu servidor for IIS, certifique-se de adicionar o MIME correto para servir a extensão de arquivo .woff. O MIME correto é application/octet-stream

Você deve retornar o header Access-Control-Allow-Origin para * para seus arquivos de fonts

Use este você não definiu classs fa

Você deve ter 2 classs, a class fas e a class fa, talvez isso funcione:

 // Wrong  // Correct  

Eu mudei de 3.2.1 para 4.0.1 e a pasta era fonte e agora é chamada de fonts.

src: url (‘../ font / fontawesome-webfont.eot? v = 3.2.1’);

src: url (‘../ fonts / fontawesome-webfont.eot? v = 4.0.1’);

Espero que ajude alguém.

Eu uso o Official Font Awesome SASS Ruby Gem e corrigi o erro adicionando a linha abaixo ao meu application.css.scss

 @import "font-awesome-sprockets"; 

Explicação:

O arquivo font-awesome-sprockets inclui as funções auxiliares assest do sprockets usadas para encontrar o caminho correto para o arquivo de fonte.

se você usa sass e importou em seu main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

O erro pode vir do arquivo font-awesome.scss que está procurando pelos arquivos de fonts em seu caminho relativo.

Então lembre- se de sobrescrever a variável $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

assim não há necessidade de adicionar o cdn no seu index.html

Pode ser possível que o caminho da sua fonte não esteja correto para que o css não consiga carregar a fonte e renderizar os icons, então você precisa fornecer o caminho perdido das fonts anexadas.

 @font-face { font-family: "FontAwesome"; src: url("fonts/fontawesome-webfont.eot"); } 

Usando caminhos absolutos em vez de relativos solucionou para mim. Eu estava usando caminhos relativos (veja o primeiro exemplo abaixo) e isso não funcionou. Eu verifiquei através do console e encontrei o servidor estava retornando um 404, arquivos não encontrados.

Caminho relativo causou um 404:

 @font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?v=4.0.3"); } 

Caminho absoluto resolveu cruz navegador:

 @font-face { font-family: "FontAwesome"; src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3"); } 

Eu não recomendaria fazer isso a menos que você precise, mas funciona para mim. Claro, você deve repetir isso para todos os formatos de fonte no arquivo font-awesome.css.

Não estava funcionando para mim porque eu tinha diretiva Allow from none para o diretório raiz na configuração do meu apache. Eis como eu consegui que funcionasse …

Minha estrutura de diretórios:

 root/ root/font-awesome/4.4.0/css/font-awesome.min.css root/font-awesome/4.4.0/fonts/fontawesome-webfont.* root/dir1/index.html 

onde meu index.html possui:

  

Eu escolhi continuar a não permitir o access à minha raiz e, em vez disso, adicionei outra input de diretório em minha configuração do Apache para root / font-awesome /

  Allow from all  

Meu problema foi com a adição do

  

dentro de um

   

tag

Eu consertei colocando fora da tag.

O que corrigiu o problema para mim (no meu computador com Windows 7) foi descriptografar meu diretório de projeto. É loucura a quantidade de falhas visuais e funcionais que surgem originalmente ao testar seu site. Basta chegar a um prompt de comando e executar:

 attrib -R %PROJECT_PATH%\*.* /S cipher /a /d /s:%PROJECT_PATH% 

… onde% PROJECT_PATH% é o caminho completo para o diretório onde seu código está armazenado.

Verifique novamente o arquivo fontawesome-all.css – na parte inferior, haverá um caminho para a pasta webfonts. O meu tinha o formato “../webfonts”, o que significava que o arquivo css estaria a um nível acima de onde está. Como todos os meus arquivos css estavam na pasta css e eu adicionei as fonts para a mesma pasta, isso não estava funcionando.

Basta mover sua pasta de fonts até um nível e tudo deve estar bem 🙂

Testado com o Font Awesome 5.0

Agora no fontawesome 5 você pode entregar uma versão em cache do JS em vez do Https.

  

Mais informações em https://fontawesome.com/get-started/svg-with-js

Use com a class alta

 

Eu tive esse problema e passei por cada etapa com cuidado … mesmo que eu esteja usando o FA há muito tempo … e então percebi que tinha essa linha no meu arquivo css de e-mail:

 * { font-family: Arial !important; } 

Erro bobo, mas isso poderia dar a dica a alguém no futuro!

Eu tentei várias das sugestões acima sem sucesso.

Eu uso os pacotes NuGeT. O são ( por algum motivo ) múltipla versão nomeada ( font-awesome, fontawesome, font.awesome, etc. )

Por que vale a pena: eu removi toda a versão instalada e, em seguida, instalei apenas a versão mais recente do font.awesome . font.awesome apenas funcionou sem a necessidade de ajustar ou configurar nada.

Eu suponho que há uma série de coisas que estão faltando nas outras versões nomeadas.

Eu encontrei uma solução hoje que era:

  1. Baixe o projeto inteiro da página do Github
  2. Em seguida, siga o restante das etapas em sua página na seção CSS padrão sobre como mover o diretório para seu projeto e adicionar o link na seção HEAD de um arquivo .html

O problema com a documentação é que eles não especificam um link para onde você deve obter uma cópia de todo o projeto de fonte incrível para colocar em seu projeto.