Os ícones FontAwesome não estão sendo exibidos. Por quê?

123

Recentemente, tenho desenvolvido este site e estou tentando colocar uma fonte ícones incríveis nele, para que seja escalonável.

A questão é que eles não estão aparecendo.

Veja o HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

ou

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Eu coloquei a referência da folha de estilo no cabeçalho.

Não sei por que eles não estão aparecendo.

Aqui está a referência:

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

Tudo bem, aqui está o html completo:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Luis valdez
fonte
1
Funciona bem para mim: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件 事件 法轮功
1
Por favor, tente outra versão do font-awesome. Por exemplo, alguns ícones não apareciam para mim na versão 4.3.0, mas apareciam na 4.7.0.
— Almir Campos
Verifique stackoverflow.com/a/55977898/4874281 . Espero que ajude alguém
— manian

Respostas:

105

Sob sua referência, você tem este:

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

Especificamente, a href=parte.

No entanto, em seu HTML completo está o seguinte:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Você já tentou substituir src=por href=em seu html completo para se tornar este?

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

Funciona para mim: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
fonte
10
Nota : algumas vezes você pode ver caixas vazias, então verifique se você tem o arquivo CSS e fonts na mesma pasta, verifique isso , espero que ajude alguém.
— shaijut
104

Para quem busca ícones incríveis de fontes ausentes, coletei algumas idéias:

  • Certifique-se de usar um link correto para o CDN, como:

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Se sua página usa HTTPS, você cria um link para o CSS incrível de fontes usando HTTPS (substitua http://por https://no link acima).

  • Verifique se você não tem AdBlock Plus ou uBlock habilitado. Eles podem estar bloqueando alguns dos ícones.

  • Redefina o cache do seu navegador. (No Chrome, clique muuuuito no botão recarregar e selecione Hard Cache Reset)

  • Certifique-se de que o elemento <span>ou <i>que você usa usa a FontAwesomefamília da fonte. Por exemplo, não deve apenas

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

    mas

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

    Não funcionará se você tiver algo como o seguinte em seu CSS:

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

  • Se você está usando o IE8, está usando um HTML5 Shim?

  • Se isso não funcionar, há mais ideias para solução de problemas no Font Awesome Wiki.

— mxro
fonte
3
Acrescentarei: verifique se o seu .htaccess não está bloqueando as extensões ttf, svg, eot ou woff
— BassMHL
substituições de fonte! Poucas respostas mencionam este. Eu verifiquei e verifiquei e finalmente descobri. Também já encontrei esse problema no passado e não sabia por quê, mas agora eu sei.
— adrianmc
1
Eu esqueci de adicionar o single facomo nome da classe primeiro. Obrigado. Resposta perfeita para encontrar o problema passo a passo.
— Kai Noack de
Para mim foi outra coisa definir a família de fontes
— levininja
Para mim, eu tinha "font-weight: 500" (para torná-lo consistente com o tema que estava usando). Tive que defini-lo como "font-weight: bold"
— bowlerae
24

No começo, não consegui fazer isso funcionar com o Font Awesome 5 :

<i class="fa fa-sort-down"></i>

É por isso que vim aqui, não estar familiarizado com fontes incríveis. Então, quando olhei mais longe, percebi que meu problema era apenas um problema com a versão.

w3schools me ajudou neste caso.

Novo no Font Awesome 5 é o fasprefixo, Font Awesome 4 usa fa.

O s fassignifica sólido e alguns ícones também têm um modo regular , especificado usando o prefixo far.

Já notei os diferentes arquivos na pasta css FontAwesome, como:

  • all.min.css
  • marcas.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

E foi então que percebi meu erro. Tudo que eu tive que fazer foi incluir o css apropriado no html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Em seguida, faça referência ao item correto:

<i class="fas fa-sort-down"></i>

Esta configuração funciona para mim. Embora nem todos os itens tenham equivalentes em cada tipo. Isso não vai funcionar:

<i class="far fa-sort-down"></i>

Como uma observação lateral, quando você não quiser fazer referência a todos os arquivos separados, isso será suficiente:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
fonte
Além disso, a cheatsheet mostra quais itens estão disponíveis para cada tipo de ícone.
— Ruard van Elburg,
12

O meu não estava funcionando porque eu queria um ícone que não foi lançado na versão FA que eu estava usando.

Isso responde por que alguns ícones são exibidos, mas outros não.

Muito óbvio, mas acho que algumas pessoas ainda caem nisso. Como eu.

— Taiguara Andrade
fonte
4
Sim, fornece uma resposta à pergunta.
— Bobort
2
Ou você está tentando usar uma fonte mais antiga que não existe mais na versão que você está usando. Este, por exemplo, é apenas chamado de times-circle, não times-circle-o, que é o nome antigo: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Obrigado!! Isso tem me feito puxar meu cabelo o dia todo
— horas por
5

Você deve usar https para maxcdn.bootstrapcdn.com. Apenas https em maxcdn oferece suporte a CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Chatchawan Wongsiriprasert
fonte
4

Resolvi esse problema colocando o diretório Fonts no mesmo nível que meus arquivos CSS.

— lolo
fonte
3

Para quem pode ser conferir esse material em 2018. Eu estou usando fonte incrível 4.7.0 e eu tenho este problema resolvido simplesmente tirando o sem fascomo visto no código <i class="fa fa-[icon-name]"></i>. Isso foi originalmente <i class="fas fa-[icon-name]"></i>.

Espero que isto ajude.

— Goodluck Leo
fonte
Além disso, estou executando o servidor node.js.
— Goodluck Leo
Novo no Font Awesome 5 é o prefixo fas, Font Awesome 4 usa fa. Da w3schools
— Ruard van Elburg
2

Apenas adicionando mais algumas informações às respostas acima em relação à atualização do fontawesome,

Se você usar a fonte incrível 5,

uma. basta copiar e colar o HTML abaixo,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Nota: Melhor incluir todos os seus scripts no <body> {YOUR_SCRIPT_HERE}</body>e imediatamente antes (YOUR_CLOSING_BODY)

b. E por exemplo,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
fonte
Que tal servir o css localmente em vez de vincular ao site fa?
— Ghilteras
este foi o meu caso ... eu não tinha o arquivo js, ​​agora funciona!
— Cristian Sepulveda de
2

adicionar isso funcionou para mim:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

dê uma olhada

então o exemplo completo é:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Expandir trecho

— Edgarmtze
fonte
2

Se você definir CSS personalizado, deverá definir font-weight: 900;alguma biblioteca Font Awesome mais recente (da versão 5). Não definindo esta espessura de fonte, ele pode mostrar quadrados.

— jurev
fonte
2

Notas

Esta resposta é criada quando a versão mais recente do fontawesome é v5. * Mas a versão yarn e npm aponta para v4. * (21/06/2019). Em outras palavras, as versões instaladas por meio de gerenciadores de pacotes estão atrás do lançamento mais recente!

Se você instalou font-awesomevia gerenciador de pacotes ( yarn ou npm ), esteja ciente de qual versão foi instalada. Como alternativa, se você já instalou font-awesomehá muito tempo, verifique qual versão foi instalada.

Instalando o font-awesome como nova dependência:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Verificar qual versão do font-awesome já está instalada:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problema

Depois de instalar a font-awesomedependência, você incorpora um desses dois arquivos de origem font-awesome.cssou font-awesome.min.css(fundado em node_modules/font-awesome/css/) no cabeçalho de sua página da web, por exemplo

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

Em seguida, visite https://fontawesome.com/ . Você seleciona os ícones livres e pesquisa o ícone de login (por exemplo). Você copia o ícone <i class="fas fa-sign-in-alt"></i>, por exemplo , você o cola em seu html e, o ícone não é mostrado, ou é exibido como um quadrado ou retângulo!

Solução

Em essência, as versões instaladas por meio de gerenciadores de pacotes estão atrás da versão mostrada no site https://fontawesome.com/ . Como você pode ver, nós instalamos font-awesome v4.7.0, mas o site mostra a documentação do font-awesome v5.*. Solução, visite o site que documenta os ícones para v4.7.0 https://fontawesome.com/v4.7.0 , copie o ícone apropriado, por exemplo, <i class="fa fa-sign-in" aria-hidden="true"></i>e incorpore-o em seu html.

— Lukasz Dynowski
fonte
Eles lançaram um novo pacote aqui com a versão mais recente. Também é compatível com less e sass \ o /
— DerpyNerd
2

Para a versão 5:

Se você baixou o pacote gratuito deste site:

https://fontawesome.com/download

As fontes estão nos arquivos all.css e all.min.css .

Portanto, sua referência será semelhante a esta:

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

O arquivo fontawesome.css não inclui a referência da fonte.

— amor ao vivo
fonte
1

Se você estiver usando a hospedagem do blogger, use esta folha de estilo css de url:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM.
fonte
1

Experimente os dois links abaixo para manter na tag de cabeçalho.

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

Obtendo os ícones do link abaixo:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— cereja
fonte
1

Eu uso:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

e estilo depois de:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— Tran Anh Hien
fonte
1

o link CDN que você postou, suponho que seja por isso que não estava aparecendo corretamente, você pode usar este abaixo, funciona perfeitamente para mim.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Expandir trecho

— John Kesh Mahugu
fonte
0

Certifique-se de incluir rel e digite "rel =" stylesheet "type = 'text / css'" no link para o arquivo css awesomefont. Sem eles, o arquivo não estava carregando corretamente para mim.

— Elliot Robert
fonte
0

Você pode adicionar isso no arquivo .htaccess no diretório da fonte incrível

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Waleed Hakim
fonte
0

Eu testei e está funcionando.

Em vez disso

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

Use-o com HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atif Tariq
fonte
-1

Você precisa de um importador de fontes. experimentar

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
fonte
-2

Eu coloquei o meu para trabalhar editando o arquivo principal font-awesome.css. Tem urls para o src (woff, eot, etc ...) Tive que mudá-los para o caminho absoluto ex: http://mywebsite.com/font-awesome.woff Então funcionou!

— Crystalove18
fonte
2
Prefiro não recomendar isso, pois você está editando um arquivo externo. Você (ou sua equipe) precisará se lembrar disso sempre que for necessário atualizar a fonte incrível.
— J Cordero
-6

Mude isso:

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

Para isso:

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

Acredito que você precise do http:caso contrário ele não sabe que protocolo usar (e usa o errado, file:por exemplo, como resultado).

— Shahar
fonte
@ user3870894 Na verdade href, estava pensando em javascript. Mas experimente o novo código.
— Shahar
@ user3870894 o_o Poste HTML completo ou pelo menos as partes principais. O que o console diz? Você tentou inspecionar o elemento?
— Shahar
2
@Shahar Ao usar //o navegador, escolhe o protocolo que o site solicitante está usando. Quando seu site usa https, ele escolhe https. Se você estiver usando http, ele usará http para solicitar o arquivo do CDN. Claro, se você abrir o site localmente usando file:///, o que não é recomendado, o navegador realmente tentará abrir o cdn com o fileprotocolo.
— Robin van Baalen
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.