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

99

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.

html css font-awesome

— Ganesh H
fonte

5

Isso já foi perguntado muitas vezes antes. Certifique-se de incluir os arquivos de fonte também .. não apenas o CSS stackoverflow.com/questions/14366158/…

— Zim

aqui está o link para o guia de solução de problemas de fontes incríveis em git github.com/FortAwesome/Font-Awesome/wiki/Troureenshot

— Mehavel

atualize a questão com a estrutura de pastas na qual você tem a pasta font-awesome, para que possamos perceber que "font-awesome.min.css" está obtendo o caminho ttf corretamente ou não. Somente css não funcionaria.

— Ajit Hogade

stackoverflow.com/a/42355738/397872

— rishta de

84

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.

— Daniel Barde
fonte

4

Essa foi a solução para mim. Eu tinha *{font-family: Raleway}e mudei para*.not(i) {font-family: Raleway}

— fungusanthrax

Eu também tive esse problema, mas não percebi por muito tempo, porque no DevTools parecia que FontAwesome estava sendo usado. Veja minha resposta para mais detalhes.

— Dagmar,

59

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.

— user2980426
fonte

Uma vez que pelo menos 0.8.1 font-awesome não é referenciado. Há três summernotearquivos na pasta fonte com extensões eot, ttfe woffque precisam ser distribuídos.

— ficuscr de

2

Tenha cuidado, no 4.6.3 (se não antes) é fontsnão Fontse em um sistema sensível caso que causa problemas ...

— Jason

1

por que a fonte incrível não diz isso em seu site? realmente não é explícito.

— Matt

Impressionante! Achei que as fontes deviam estar na mesma pasta que o css, deviam estar um nível de pasta acima.

— Giovani Vercauteren

Além disso, certifique-se de que sua biblioteca esteja atualizada. Eu tinha todos os meus logotipos, exceto o logotipo do bandcamp. Depois de baixar o 4.7 atualizado e substituir os arquivos, funcionou.

— Ryan Walker

45

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

— krystonen
fonte

Isso fez tudo para mim! Estranho que não tenha sido atualizado nos documentos

— GroomedGorilla

Essa foi a única coisa que funcionou. Se você estiver usando uma versão moderna, use esta.

— samurdhilbk

SALVA VIDAS! mude para "fa fa-bars" borked

— desagradável

Obrigado, para mim alguns ícones wirk com fas e outros com fab, por exemplo, fab fa-twitter está bem, mas fas fa-twitter mostra um quadrado branco, vai entender!

— user1620090

Então, se a nova versão é fas, então por que eu preciso mudar minhas classes de 'fas' para 'fa'

— Sam

22

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.

— Mais uma pergunta
fonte

1

Isso funcionou para mim. Para mim, o fa-envelope não estava funcionando, mas o fa-envelope estava funcionando. Muito estranho, mas resolveu meu problema.

— Jordan Schuetz

@JordanSchuetz "fab" é específico para ícones de marca, como "fab fa-facebook-f". Nas versões mais novas, você encontrará "fas" para a variação "sólida", então a sua seria fixada em "fas fa-envelope" nas versões mais recentes ou "fa fa-envelope" em uma versão mais antiga.

— Tessa

20

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

11

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.

— Valentin Mercier
fonte

10

Eu fiz o mesmo e ainda tenho apenas a caixa quadrada

— Vipul Hadiya

5

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

— Halid
fonte

4

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)

— Paulo
fonte

4

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.

— Mickers
fonte

1

Tive problemas para fazer o v5 + do FontAwesome funcionar também. Tinha mudado sua pasta "webfonts" para "fonts" no css, e colocado da mesma maneira, e não funcionava corretamente. Arquivos substituídos por v4.7.0 e funciona perfeitamente. Hrm.

— Lisa Cerilli,

1

Na versão 5, a família de fontes para os ícones não é mais "FontAwesome". Na versão gratuita, agora é "Font Awesome 5 Free" e "Font Awesome 5 Pro" na versão profissional. Eu estava tendo esse problema quando estava usando manualmente os códigos de caracteres em alguns lugares, e eles pararam de funcionar porque a família da fonte não foi definida.

— Tessa

4

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>

Expandir trecho

— Hrithik verma
fonte

Muito obrigado, gastei 24 horas para consertar este fontawesome

— Mathew Magante

2

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>

— Dagmar
fonte

2

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

— Jeff Diederiks
fonte

Adição interessante @fortawesome/fontawesome-free/css/all.csscorrigiu

— Andy Braham

1

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 .

— sst
fonte

1

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.

— James Wilkins
fonte

1

meu problema era o que tinha mais votos

*{
font-family: xxxxx
}

mudá-lo para isso resolveu o problema

body{
font-family: xxxx
}

— Jamsheer
fonte

0

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.

— Rishta
fonte

0

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.

— Obaidul Haque
fonte

0

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.

— Michael Shulman
fonte

0

Baseado na versão 5.10.1.

Minha solução (localmente):

Se você estiver usando "fontawesome.css" ou "fontawesome.min.css", tente usar "all.css" (localizado na pasta css).
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"

— Tou Toua Yang
fonte

0

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

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

— backciro
fonte

0

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>

— PythonMaster202
fonte

0

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

— Bruno Leveque
fonte

0

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

— Ogglas
fonte

o problema com este js é que o arquivo é muito pesado para carregar

— exequielc

0

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

— bonkisama
fonte

0

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>

Expandir trecho

— sani
fonte

0

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

Expandir trecho

— De Zin Htang
fonte

Trabalhando muito bem com isso

— De Zin Htang

-1

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>

— Ronald Namwanza
fonte

-1

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.

— Jtubre
fonte

Por que o voto negativo? É um caso extremo, mas não é uma causa facilmente encontrada em outro lugar.

— jtubre de

-1

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.

— Yngve Høiseth
fonte