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

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

Respostas: