Le icone FontAwesome non vengono visualizzate. Perché?

123

Recentemente ho sviluppato questo sito Web e sto cercando di inserire icone fantastiche per i caratteri, quindi è scalabile.

Il fatto è che non si fanno vedere.

Guarda l'HTML:

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

o

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

Ho messo il riferimento al foglio di stile nella testa.

Non so perché non si fanno vedere.

Ecco il riferimento:

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

Bene, ecco l'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
Per me funziona bene: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli郝海东冠状病六四事件法轮功
1
Prova un'altra versione di font-awesome. Ad esempio, alcune icone non venivano visualizzate nella versione 4.3.0 ma apparivano nella 4.7.0.
— Almir Campos
Controlla stackoverflow.com/a/55977898/4874281 . Spero che aiuti qualcuno
— manian

Risposte:

105

Sotto il tuo riferimento, hai questo:

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

In particolare, il href= parte.

Tuttavia, sotto il tuo HTML completo c'è questo:

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

Hai provato a sostituire src=con href=nel tuo HTML completo per diventare questo?

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

Funziona per me: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
fonte
10
Nota : alcune volte potresti vedere caselle vuote, quindi ricontrolla di avere css e file di caratteri nella stessa cartella controlla questo , spero aiuti qualcuno.
— shaijut
104

Per i cercatori di icone fantastiche di font mancanti, ho raccolto alcune idee:

  • Assicurati di utilizzare un collegamento corretto alla CDN, come ad esempio:

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

  • Se la tua pagina utilizza HTTPS, ti colleghi al fantastico CSS del font usando HTTPS (sostituisci http://con https://nel link sopra).

  • Controlla di non avere abilitato AdBlock Plus o uBlock. Potrebbero bloccare alcune delle icone.

  • Reimposta la cache del tuo browser. (Su Chrome fai un lungo clic sul pulsante di ricarica e seleziona Hard Cache Reset)

  • Assicurati che l' elemento <span>o <i>che utilizzi utilizzi la FontAwesomefamiglia di caratteri. Ad esempio, non deve solo

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

    ma

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

    Non funzionerà se hai qualcosa come il seguente nel tuo CSS:

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

  • Se stai usando IE8, stai usando uno shim HTML5?

  • Se questo non funziona, ci sono ulteriori idee per la risoluzione dei problemi sul Wiki di Font Awesome.

— mxro
fonte
3
Aggiungerò: controlla che il tuo .htaccess non blocchi le estensioni ttf, svg, eot o woff
— BassMHL
carattere sostituisce! Non molte risposte menzionano questo. Ho controllato, controllato e controllato e finalmente l'ho capito. Ho riscontrato questo problema anche in passato e non sapevo perché, ma ora lo so.
— adrianmc
1
Non ho aggiunto prima il singolo facome nome della classe. Grazie. Risposta perfetta per trovare il problema passo dopo passo.
— Kai Noack
Per me era qualcos'altro impostare la famiglia di caratteri
— levininja
Per me avevo "font-weight: 500" (per renderlo coerente con il tema che stavo usando). Ho dovuto impostarlo su "font-weight: bold"
— bowlerae
24

All'inizio non riuscivo a farlo funzionare con Font Awesome 5 :

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

Ecco perché sono venuto qui, non avendo familiarità con i caratteri fantastici. Quindi, quando ho guardato oltre ho notato che il mio problema era semplicemente un problema con la versione.

w3schools mi ha aiutato in questo caso.

La novità di Font Awesome 5 è il fasprefisso utilizzato da Font Awesome 4 fa.

La s in fassta per solido e alcune icone hanno anche una modalità regolare , specificata utilizzando il prefisso far.

Ho già notato i diversi file nella cartella CSS FontAwesome, come:

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

Ed è allora che ho capito il mio errore. Tutto quello che dovevo fare era includere il css appropriato nell'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">

Quindi fai riferimento all'elemento corretto:

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

Questa configurazione funziona per me. Sebbene non tutti gli articoli abbiano equivalenti in ogni tipo. Questo non funzionerà:

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

Come nota a margine, quando non vuoi fare riferimento a tutti i file separati, questo sarà sufficiente:

<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
Inoltre, il cheatsheet mostra quali elementi sono disponibili per ogni tipo di icona.
— Ruard van Elburg
12

Il mio non funzionava perché volevo un'icona che non fosse rilasciata nella versione FA che stavo usando.

Questo risponde al motivo per cui alcune icone vengono visualizzate ma altre no.

Abbastanza ovvio, ma immagino che alcune persone ci caschino ancora. Come me.

— Taiguara Andrade
fonte
4
Sì, fornisce una risposta alla domanda.
— Bobort
2
Oppure stai tentando di utilizzare un carattere precedente che non esiste più nella versione che stai utilizzando. Questo, ad esempio, si chiama semplicemente times-circle non times-circle-o che è il vecchio nome: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Grazie!! Questo mi ha fatto tirare i capelli tutto il giorno
— 24x7
5

È necessario utilizzare https per maxcdn.bootstrapcdn.com. Solo https su maxcdn supporta 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

Ho risolto questo problema mettendo la directory Fonts allo stesso livello dei miei file CSS.

— lolo
fonte
3

A chi possono essere controllare questo fuori nel 2018. Sto usando carattere impressionante 4.7.0 e ho ottenuto questo problema risolto semplicemente prendendo la sa fascome si è visto nel codice <i class="fa fa-[icon-name]"></i>. Questo era originariamente <i class="fas fa-[icon-name]"></i>.

Spero che questo ti aiuti.

— Goodluck Leo
fonte
Inoltre sto eseguendo il server node.js.
— Goodluck Leo
La novità di Font Awesome 5 è il prefisso fas, Font Awesome 4 utilizza fa. Da w3schools
— Ruard van Elburg
2

Aggiungendo solo qualche informazione in più alle risposte di cui sopra per quanto riguarda l'aggiornamento su fontawesome,

Se usi il font awesome 5,

un. basta copiare e incollare il seguente HTML,

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

Nota: meglio includere tutti i tuoi script all'interno <body> {YOUR_SCRIPT_HERE}</body>e subito prima (YOUR_CLOSING_BODY)

b. E per esempio,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
fonte
Che ne dici di servire il CSS localmente invece di collegarti al sito web della fa?
— Ghilteras
questo era il mio caso ... non avevo il file js, ora funziona!
— Cristian Sepulveda
2

aggiungendo questo ha funzionato per me:

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

guarda

quindi l'esempio 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>
Espandi lo snippet

— edgarmtze
fonte
2

Se definisci CSS personalizzato, devi impostare font-weight: 900;una libreria Font Awesome più recente (dalla versione 5). Se non si imposta questo spessore del carattere, potrebbero essere visualizzati dei quadrati.

— jurev
fonte
2

Appunti

Questa risposta viene creata quando l'ultima versione di fontawesome è v5. * Ma la versione filato e npm punta a v4. * (21.06.2019). In altre parole, le versioni installate tramite i gestori di pacchetti sono dietro l'ultima versione!

Se hai installato font-awesometramite il gestore di pacchetti ( filato o npm ), tieni presente quale versione è stata installata. In alternativa, se hai già installato font-awesomemolto tempo fa, controlla quale versione è stata installata.

Installazione di font-awesome come nuova dipendenza:

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

Verifica quale versione di font-awesome è già installata:

$ 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

Dopo aver installato la font-awesomedipendenza, incorpori uno di questi due file sorgente font-awesome.csso font-awesome.min.css(fondato in node_modules/font-awesome/css/) nell'intestazione della tua pagina web, ad es

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

Successivamente, visiti https://fontawesome.com/ . Si seleziona icone gratis e si cerca di accesso icona (come esempio). Copi l'icona <i class="fas fa-sign-in-alt"></i>, ad esempio , la incolli nel tuo html e l'icona non viene mostrata o viene visualizzata come quadrato o rettangolo!

Soluzione

In sostanza, le versioni installate tramite i gestori di pacchetti sono precedenti alla versione mostrata sul sito Web https://fontawesome.com/ . Come puoi vedere, abbiamo installato font-awesome v4.7.0ma, il sito web mostra la documentazione per font-awesome v5.*. Soluzione, visita il sito Web che documenta le icone per v4.7.0 https://fontawesome.com/v4.7.0 , copia l'icona appropriata, ad esempio, <i class="fa fa-sign-in" aria-hidden="true"></i>e incorporala nel tuo html.

— Lukasz Dynowski
fonte
Hanno rilasciato un nuovo pacchetto qui che ha l'ultima versione. È anche compatibile con less e sass \ o /
— DerpyNerd
2

Per la versione 5:

Se hai scaricato il pacchetto gratuito da questo sito:

https://fontawesome.com/download

I caratteri si trovano nei file all.css e all.min.css .

Quindi il tuo riferimento sarà simile a questo:

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

Il file fontawesome.css non include il riferimento al font.

— live-love
fonte
1

Se stai utilizzando l'hosting di blogger, utilizza questo foglio di stile URL CSS:

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

Prova i seguenti due link da tenere nel tag di intestazione.

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

Ottenere le icone dal collegamento sottostante:

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

Io 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 stile dopo:

.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

il link CDN che avevi pubblicato suppongo sia il motivo per cui non veniva visualizzato correttamente, puoi usare questo qui sotto, funziona perfettamente per me.

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

— John Kesh Mahugu
fonte
1

Sono stato in grado di far funzionare Font Awesome utilizzando il file all.min.css.

— Rob Breidecker
fonte
0

Assicurati di includere rel e digita come in "rel =" stylesheet "type = 'text / css'" nel collegamento al file css di awesomefont. Senza questi il ​​file non si caricava correttamente per me.

— Elliot Robert
fonte
0

Puoi aggiungerlo nel file .htaccess nella directory di awesome font

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

L'ho provato e funziona.

Invece di questo

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

Usalo con HTTPS

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

Hai bisogno di un importatore di caratteri. | provare

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

Ho fatto funzionare il mio modificando il file principale font-awesome.css. Ha gli URL al src (woff, eot, ecc ...) Ho dovuto cambiarli nel percorso assoluto, ad esempio: http://mywebsite.com/font-awesome.woff Poi ha funzionato!

— crystallove18
fonte
2
Preferisco non consigliarlo poiché stai modificando un file esterno. Tu (o il tuo team) dovrete ricordarlo ogni volta che hanno bisogno di aggiornare fontawesome.
— J Cordero
-6

Cambia questo:

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

A questa:

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

Credo che tu abbia bisogno del http:altrimenti non sa quale protocollo usare (e usa quello sbagliato, file:ad esempio, di conseguenza).

— Shahar
fonte
@ user3870894 In realtà href, stavo pensando a javascript. Ma prova il nuovo codice.
— Shahar
@ user3870894 o_o Pubblica HTML completo o almeno parti principali allora. Cosa dice la console? Hai provato a ispezionare l'elemento?
— Shahar
2
@ Shahar Utilizzando //il browser seleziona il protocollo utilizzato dal sito richiedente. Quando il tuo sito utilizza https, seleziona https. Se stai usando http, usa http per richiedere il file dalla CDN. Ovviamente se apri il sito in locale usando file:///, cosa sconsigliata, il browser proverà effettivamente ad aprire il cdn con il fileprotocollo.
— Robin van Baalen
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.