Font Awesome não funciona, ícones mostrando como quadrados

224

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

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

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

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

<i class="icon-camera-retro"></i>

Mas tudo isso é renderizado em uma grande praça. Alguém sabe o que poderia estar acontecendo?

css html twitter-bootstrap font-awesome Connor Black
fonte
1
Você está importando a fonte?
mayhewr
1
Provavelmente não. Eu pensei que você só tinha que incluir o .cssarquivo.
Connor Preto
2
O título indica que o problema é específico do Chrome. Está carregando em outros navegadores ou o arquivo de fonte referenciado está gerando um erro 404?
Cimmanon
1
Não foi possível encontrar a etapa 3 no link acima a partir de agosto de 2016 ... Algum redirecionamento?
Saurabh Tiwari
1
Provavelmente você se esqueceu de copiar a pasta webfont?
entithat

Respostas:

149

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

mayhewr
fonte
5
Ótima resposta, apenas para fornecer algumas informações adicionais, você também pode colocar as fontes no caminho padrão fornecido pelo css, basta abrir Font-awesome.css e você encontrará a seguinte entrada: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1'))
— Braulio
1
Apenas para futuros leitores do ASP.NET MVC com o mesmo problema: Se você tiver todas as pastas no local correto, verifique se adicionou o tipo MIME no arquivo web.config, conforme indicado aqui: stackoverflow.com/questions/4015816/…
— precisa saber é o seguinte
1
Se você usar o Esquema URI de dados com uma versão base64 da fonte (pode ser facilmente convertida on-line), não precisará se preocupar com o caminho adequado do arquivo e a hospedagem de recursos.
— renascimento.
Nota : se você não quiser modificar o css, basta colocar css e fontes na mesma pasta, verifique este
— shaijut
7
@tutuca: Nem todo mundo pode usar uma CDN.
— Lightness Races in Orbit em
188

Você deve ter 2 classes, a faclasse e a classe que identifica o ícone desejado fa-twitter, fa-search, etc ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
fonte
4
Esta deve ser a resposta principal, o CSS forneceu pontos para o local certo para os arquivos de fonte, desde que você não os mova - isso estava me deixando
— louca
5
Nota: "O prefixo fa foi descontinuado na versão 5. O novo padrão é o estilo fas solid e o estilo fab para marcas".
— Terje Solem 24/02
1
Isso consertou para mim! Eu estou usando Angular (5 eu acho) junto com o primeng e parece que essa fonte incrível já funcionou para, por exemplo, MenuItem-definition dentro de xx.component.ts (os ícones renderizados corretamente). No entanto: ao adicionar algo ao xx.component.html (por exemplo, botão p com um ícone), é necessário adicionar a classe fa e fa- <qualquer ícone>!
— Igor
1
@TerjeSolem as informações que você forneceu são muito importantes. Isso resolveu meu problema. como eu estava usando a versão mais velhos, mas estava usando "fas" graças
— MindRoasterMir
Thanks️ Muito obrigado! Eu tenho o mesmo com os ícones abertos oi oi -... Perdi o primeiro oi.
— Alexandr
54

Usa isto 

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

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

— Kumar Deepam
fonte
6
isso pressupõe que você deseja usar o CDN do font-awesome. Para um ambiente de produção comercial, eu não faria isso.
— Jay Edwards
48

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

Espero que ajude alguém.

— Bren1818
fonte
11
BINGO! Muito obrigado. A Metro-UI estava substituindo a família de fontes incrível da fonte. Eu tive que adicionar o seguinte: .fa {font-family: 'FontAwesome'! Important; } então funcionou.
Debbie A
1
Sim. Bobo e pequeno. Isso - mudar a fonte para outra coisa e afetar ícones impressionantes - aconteceu comigo tantas vezes que está se tornando estúpido.
Edd
2
Sim - essa linha era a culpada (para ser mais específica, a regra! Importante): * {font-family: 'Source Sans Pro'! Important} ''
Svet
1
Esta é a dica mais importante e útil sobre o uso do Font Awesome para evitar perder tempo e encontrar um problema.
Dez
22

Se você estiver usando LESS ou SASS, abra o arquivo font-awesome.less / sass e edite a variável de caminho @fa-font-path: "../font";que aponta para as fontes 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;
}

O mesmo acontece com o 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;
}
jonschlinkert
fonte
Existe uma maneira de importar apenas determinados ícones em vez de todos eles? Eu gostaria apenas de compilar meu arquivo css com alguns ícones.
user805981
@fa-font-path: "../fonts";trabalhou para mim. (Aviso The Missing sadicionado)
prograhammer
18

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 uma pasta como:

font awesome -> css
             -> fonts

ou a maneira mais fácil:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Erga Kandly
fonte
13

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
Vojkan Cvijanovic
fonte
12

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

mas hospedar em seu servidor colocando fontes e css na mesma pasta funcionou para mim, assim

insira a descrição da imagem aqui

então basta vincular o css:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

a esperança ajuda alguém.

shaijut
fonte
8

Você deve ter 2 classes, a classe fas e a classe fa, talvez isso funcione:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
Israel
fonte
3
Não perceberam isso - a partir da v5, agora eles exigem uma classe fabou em fasvez da faclasse.
Echilon
7

Eu tive esse problema. O problema era que eu tinha um estilo CSS da família de fontes com! Important substituindo a fonte fontawesome.

Jonny White
fonte
Eu tive o mesmo problema com * {font-family: Helvetica, sans-serif! Important; }
Dubbo
6

Caso você esteja trabalhando com o Maven e o Apache Wicket verifique também o seguinte para tentar resolver o problema com o Font-Awesome e os ícones nã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

Verificação 1) Você está usando corretamente um Package Resource Guard para permitir carregar os arquivos de fonte corretamente?

Exemplo da sua classe que estende o WebApplication:

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

}

Verificação 2) Depois de verificar se todas as fontes foram transferidas corretamente para o navegador da Web, verifique o que realmente foi transferido para o navegador, ou seja, a integridade dos arquivos de fonte foi alterada? Compare os arquivos no diretório de origem e os arquivos transferidos para o Navegador da Web usando, por exemplo, a Barra de Ferramentas do Desenvolvedor da Web do Firefox e DiffDog (para comparação de arquivos).

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

Exemplo do seu pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

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

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 alerta: " 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 arquivos binários como recursos, precisará declarar dois conjuntos de recursos mutuamente exclusivos. O primeiro conjunto de recursos define os arquivos a serem filtrados e o outro conjunto de recursos define os arquivos a serem copiados inalterados ... "

Philipp
fonte
6

Eu tive esse problema e segui cada etapa com cuidado ... mesmo usando a FA há muito tempo ... e percebi que tinha essa linha no meu arquivo css de email:

* {
font-family: Arial !important;
}

Erro bobo, mas isso pode avisar alguém no futuro!

J Doe
fonte
4

Você deve retornar o cabeçalho Access-Control-Allow-Origin para * para seus arquivos de fontes

trônico
fonte
2
Exatamente! O uso de fornecedores terceirizados para veicular seus arquivos impressionantes de fontes não resolve o seu problema, você apenas passa para outras pessoas a serem resolvidas.
Simanas
4

A partir de dezembro de 2018, acho mais fácil usar a versão estável 4.7.0 hospedada no bootstrapcdn em vez do incrível cd 5.xx da fonte 5.xx em seu site - já que toda vez que eles atualizam versões menores, a versão anterior será interrompida.

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Os ícones são os mesmos:

<i class="fa fa-facebook"></i>
ehacinom
fonte
3

font-weight: 900;

Eu tive um problema diferente com o Font Awesome 5. O peso padrão da fonte deve ser 900 para os ícones FontAwesome, mas o substitui para 400 nas tags span e i. Funcionou quando eu o corrigi.

Aqui está a referência do problema na página do Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

Espero que ajude alguém.

maníaco
fonte
1
obrigado que foi o meu problema também. Eu configurei a Font-Family como "Font Awesome 5 Free", mas também precisava do peso da fonte definido como 900!
Hans Vonn
3

Se você estiver usando a versão 5. * ou superior, precisará usar o

all.css ou all.min.css

Incluir o fontawesome.css não funciona, pois não tem referência à pasta webfonts e não há referência à @ font-face ou família de fontes

Você pode inspecionar isso pesquisando o código da propriedade da família de fontes em fontawesome.css ou fontawesome.min.css

the_haystacker
fonte
este foi a solução perfeita para mim - pena que a resposta está tão abaixo, eu não a vi e tive que descobrir sozinha
Cold_Class 23/01
2

Pode ser possível que o caminho da fonte não esteja correto, para que o css não consiga carregar a fonte e renderizar os ícones, para que você precise fornecer o caminho oculto das fontes anexadas.

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

Use isto <i class="fa fa-camera-retro" ></i>você não definiu fa classes

jitendra varshney
fonte
2

A partir da versão 5, se você baixou o pacote deste site:

https://fontawesome.com/download

As fontes estão no arquivo all.css e all.min.css.

É assim que sua referência seria usando a versão mais recente agora (substitua pela sua pasta):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
amor ao vivo
fonte
2

Depois de lutar para encontrar uma solução e NÃO achar útil a documentação oficial, isso resolveu o problema para mim:

  1. Faça o download do Fontawesome.zip. Estou usando a versão 5.10.2 e obtive-a daqui https://fontawesome.com/download

  2. Dentro do arquivo zip, existem várias pastas. Você só precisa de pastas css e webfonts insira a descrição da imagem aqui

    1. Crie duas pastas em seus projetos da web e nomeie-as como css e webfonts. insira a descrição da imagem aqui

Esses nomes são obrigatórios. Agora copie o conteúdo de css e webfonts do zip para as pastas correspondentes no seu projeto. E isso é tudo!

Cuidado fontawesome! A grandiosidade está simplificando as coisas para o usuário!

BabaNew
fonte
1

Mudei de 3.2.1 para 4.0.1 e a pasta era fonte e agora é chamada de fonte.

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.

André Duarte
fonte
1

Eu uso a fonte oficial 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 Sass helper assest Sass usadas para encontrar o caminho adequado para o arquivo de fonte.

Marklar
fonte
1

se você estiver usando sass e tiver importado no seu main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

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

Portanto, lembre- se de substituir a variável $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

assim, não é necessário adicionar o cdn no seu index.html

vilsbole
fonte
1

Verifique 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 ficaria 1 nível acima de onde está. Como todos os meus arquivos css estavam na pasta css e adicionei as fontes à mesma pasta, isso não estava funcionando.

Basta mover sua pasta de fontes para um nível superior e tudo deve ficar bem :)

Testado com o Font Awesome 5.0

Ross
fonte
Essa deve ser a resposta preferida, pois responde diretamente à pergunta sem vincular à documentação desatualizada. Kudos
Kyle Champion
1

Eu estava tendo o mesmo problema com fonte awesome 5 baixado com fio, fiz adicionou o arquivo de min.css AO LONGO com o arquivo all.js.

Espero que isso ajude alguém alguém

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
Enrique Martinez
fonte
1

O arquivo /css/all.css contém o estilo principal e todos os estilos de ícone necessários ao usar o Font Awesome. A pasta / webfonts contém todos os arquivos de tipos de letra aos quais o CSS acima faz referência e depende.

Copie a pasta inteira / webfonts e /css/all.css no diretório de ativos estáticos do seu projeto (ou onde você preferir manter os ativos de front-end ou outros itens do fornecedor).

Adicione uma referência ao arquivo /css/all.css copiado no de cada modelo ou página em que você deseja usar o Font Awesome.

Basta visitar - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Você receberá a resposta.

Dipesh Chauhan
fonte
0

Usar caminhos absolutos em vez de relativos resolveu isso para mim. Eu estava usando caminhos relativos (veja o primeiro exemplo abaixo) e isso não funcionou. Eu verifiquei via console e descobri que o servidor estava retornando um 404, arquivos não encontrados.

O caminho relativo causou um 404: 

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

Caminho absoluto resolvido entre navegadores:

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

Tim
fonte
0

Não estava funcionando para mim porque eu tinha Allow from nonediretiva para o diretório raiz na minha configuração do apache. Aqui está como eu consegui funcionar ...

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:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

Eu escolhi continuar proibindo o acesso à minha raiz e, em vez disso, adicionei outra entrada de diretório na minha configuração do apache para root / font-awesome / 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
user3325776
fonte