A fonte incrível não está exibindo o ícone

Estou usando o Font Awesome e não desejo adicionar CSS com HTTP. Eu baixei o Font Awesome e o incluí em meu código, mas o Font Awesome está mostrando uma caixa quadrada com borda em vez de um ícone. Aqui está o meu código:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Gostaria de saber como fazer a exibição do ícone em vez da caixa quadrada com borda.

No meu caso, cometi o seguinte erro no meu código css.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Isso substituirá todas as regras da família de fontes para a página inteira. Minha solução foi mover o código para o corpo dessa forma.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Sempre que você usa o !importantsinalizador em css, qualquer outra regra css declarada do mesmo tipo no mesmo elemento será substituída.

Ao abrir, font-awesome.min.cssvocê verá o seguinte caminho:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Isso significa que você deve criar um diretório Fontse então copiar os arquivos fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) para esta pasta. Depois disso, tudo deve funcionar bem.

Esteja ciente de que a nova versão (5) da fonte awesome usa "fas"ou em "fab"vez de "fa"prefixo.

Citado em seu site:

O prefixo fa se tornou obsoleto na versão 5. O novo padrão é o estilo fas solid e o estilo fab para marcas.

É por isso que minhas fontes estavam mostrando quadrados em branco. Agora corrigido.

Código de exemplo:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Veja: https://fontawesome.com/icons/facebook-f?style=brands

Primeiro, verifique se você tem class = "fa", bem como qualquer que seja a classe do ícone. Então, não apenas

<i class="fa-pencil" title="Edit"></i>

Mas também

<i class="fa fa-pencil" title="Edit"></i> 

Em seguida, ele funciona conforme o esperado. Isso resolveu meu problema.

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

Verifique se o caminho para o seu CSSarquivo está correto. Em vez disso, prefira links absolutos, eles são mais fáceis de entender, pois sabemos de onde começamos e os mecanismos de pesquisa também os preferem em vez de links relativos. E, para reduzir a largura de banda, use o link de servidores incríveis de fontes:

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

Além disso, se você usá-lo, não haverá necessidade de enviar fontes extras para o seu servidor e você terá a certeza de apontar para o CSSarquivo correto e também se beneficiará das últimas atualizações instantaneamente.

Eu estava lidando com o mesmo problema, então descobri que tenho que usar a nova versão (5 e mais)

use este cdn ele funcionará.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Para começar, você não deve ter ambos font-awesome.css e font-awesome.min.css

Geralmente, use font-awesome.cssdurante o desenvolvimento e mude para font-awesome.min.cssquando estiver satisfeito com o site.

Problemas como esse geralmente são causados ​​por caminhos e locais relativos, portanto, verifique onde seu arquivo html está em relação ao css.

Se o seu arquivo html estiver no diretório base e o css em uma subpasta fora da raiz, você precisará de: href="./css/font-awesome.css"(ponto único)

Todos os itens acima estão corretos, mas, além disso, meu problema foi que eu baixei a versão gratuita do FA5 que não tem:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Não consegui fazer a v5 funcionar, então voltei para a 4.7.0 com a ajuda das postagens acima e resolvi meu problema.

Eu estava enfrentando o mesmo problema ... então, em vez de baixar a fonte incrível, adicionei um link no meu código html e funcionou.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Instalei com sucesso o Font Awesome usando seu CDN e javascript include (conforme descrito nesta página ). Então tentei copiar o HTML e CSS para algumas páginas legadas e de repente vi caixas quadradas vazias em vez dos ícones.

Eu vi a resposta de Daniel (acima) e como meu arquivo CSS legado era enorme (e tinha anos), suspeitei que esse era o problema. No entanto, quando olhei no Chrome DevTools, realmente parecia que Font Awesome estava carregado:

Eu esperava ver a fonte riscada se houvesse um problema ... No entanto, eu tinha realmente esgotado todas as minhas opções, então verifiquei os Estilos Computados e vi claramente que a fonte Font Awesome definitivamente não estava sendo usada. (Veja a fonte renderizada na parte inferior)

Meu arquivo CSS legado estava uma bagunça e eu preferia não tocá-lo, então trapaceei ao fazer isso - por favor, não conte a ninguém :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Também é importante observar que, quando eu atualizei da versão 4.7.0 do Font Awesome para a versão 5.4.1, esse problema foi embora! Usei este guia de configuração e este HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Para aqueles que usam SCSS e o pacote NPM, aqui está minha solução:

npm i --save @fortawesome/fontawesome-free

Em seguida, na parte superior de um arquivo SCSS (de preferência, um arquivo SCSS importado na raiz do seu aplicativo):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

No meu caso: Você precisa copiar toda a pasta font-awesome para a pasta css do projeto e não apenas o arquivo font-awesome.min.css .

Portanto, parece que adicionar style='font-weight:normal;'ou alterar a fonte diretamente no elemento substitui a .fas{font-weight:900}definição no arquivo CSS do Font Awesome. Eu acho que a fonte tem definições específicas dentro do arquivo de fonte com que trabalha. Parece que font-weightdeve ser definido entre 501 e 1000 ou a fonte pode parecer um bloco quadrado.

meu problema era o que tinha mais votos

*{
font-family: xxxxx
}

mudá-lo para isso resolveu o problema

body{
font-family: xxxx
}

Você pode ter usado um VCS (git ou algo semelhante) para transferir arquivos de ícone para o servidor. git diz:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Você provavelmente terá que corrigir suas fontes.

Eu acho que você não tem pasta de fontes em sua pasta raiz, como a pasta onde fica css.

Demo

E a pasta css é como

E pasta de fontes como

Espero que funcione para você.

Te agradece.

No MacOS Mojave, tive esse problema no Safari. As imagens incríveis de fontes funcionavam no Chrome, mas não no Safari, então eu tinha certeza de que não era o site.

Consegui renderizá-los acessando Preferências no menu do Safari e desabilitando / desmarcando "Impedir rastreamento entre sites" na guia Privacidade.

Não sei por que isso corrigiu, mas fez.

Baseado na versão 5.10.1.

Minha solução (localmente):

1. Se você estiver usando "fontawesome.css" ou "fontawesome.min.css", tente usar "all.css" (localizado na pasta css).

2. A pasta "css" e a pasta "webfonts" do pacote fontawesome que você baixou devem estar no mesmo nível que as outras.

No meu caso, eu já tinha uma pasta css, então simplesmente renomeei a pasta css fontawesome para "css-fa".

Com "css-fa" e "webfonts" em minha pasta css, basta vinculá-lo corretamente em seu editor de texto e ele deve funcionar.

Ex: link rel = "stylesheet" href = "css / css-fa / all.css"

resolveu alterar o seletor de família de fontes direcionado! importante de * { ... } para *:not(i) { ... }

(com pré-processador scss); espero que você tenha resolvido

O código abaixo é font-awesome 4.70.0. Para ir para o font-awesome 5.11.2, clique aqui .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Estou usando o FontAwesome Pro e a solução para mim foi incorporar em all.min.cssvez de fontawesome.min.css.

Eu estava seguindo este tutorial para hospedar o Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Por algum motivo, não consegui <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">carregar, o webfontsque resultou em apenas quadrados aparecendo. Mas quando usei <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>tudo começou a funcionar. Ambos os links foram adicionados em HTML <head>.

Eu estava tentando adicionar fa 5.0.13 ao drupal 8 com scss. Os estilos não são incluídos por padrão no fa.scss principal teve que adicioná-los manualmente.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

você precisa colocar o arquivo font-awesome na pasta css e mudar

href = "../ css / font-awesome.css" para href = "css / font-awesome.css"

Mais uma coisa, você pode substituir este arquivo css incrível de fontes e tentar este

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

Cuidado com o Bootstrap! O bootstrap substituirá as classes .fa. Se você está trazendo os dois pacotes separadamente pensando "Vou usar Bootstrap para manuseio responsivo de blocos e Font-Awesome para ícones", você precisa endereçar as classes .fa dentro do Bootstrap para que elas não interfiram com a posição do Font-Awesome implementação sozinha.

por exemplo: font-family 'FontAwesome' no Bootstrap irá interferir com font-family 'Font Awesome 5 Free' em Font-Awesome e você obterá uma caixa branca em vez do ícone que deseja.

Pode haver maneiras mais limpas de lidar com isso, mas se você examinou a lista de verificação tentando corrigir o problema da "caixa branca" e ainda não consegue descobrir (como eu fiz), esta pode ser a resposta que você está procurando para.

No meu caso, o problema foi causado pelo uso de alguns estilos regulares ( far) que não estão incluídos no conjunto gratuito. Mudar para fasconsertar.