Il carattere fantastico non mostra l'icona

99

Sto usando Font Awesome e non desidero aggiungere CSS con HTTP. Ho scaricato Font Awesome e l'ho incluso nel mio codice, ma Font Awesome mostra una casella quadrata bordata invece di un'icona. Ecco il mio codice:

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

Vorrei sapere come visualizzare l'icona invece del riquadro quadrato bordato.

html css font-awesome

— Ganesh H
fonte

5

Questo è stato chiesto molte volte in passato. Assicurati di includere anche i file dei caratteri .. non solo CSS stackoverflow.com/questions/14366158/…

— Zim

ecco il link alla fantastica guida ai tourbleshooting sui font in git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

— Mehavel

per favore aggiorna la domanda con la tua struttura di cartelle in cui hai la cartella font-awesome, in modo che possiamo capire che "font-awesome.min.css" sta ottenendo correttamente il percorso ttf o no. Solo css non funzionerebbe.

— Ajit Hogade

stackoverflow.com/a/42355738/397872

— Rishta

84

Nel mio caso ho commesso il seguente errore nel mio codice CSS.

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

Ciò sovrascriverà tutte le regole della famiglia di caratteri per l'intera pagina. La mia soluzione era spostare il codice nel corpo in questo modo.

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

NB: Ogni volta che si utilizza il !importantflag in css, qualsiasi altra regola css dichiarata dello stesso tipo sullo stesso elemento verrà sovrascritta.

— Daniel Barde
fonte

4

Questa era la soluzione per me. L'ho avuto *{font-family: Raleway}e l'ho cambiato in*.not(i) {font-family: Raleway}

— fungusanthrax,

Ho avuto anche questo problema, ma non me ne sono reso conto per anni perché in DevTools sembrava davvero che fosse utilizzato FontAwesome. Vedi la mia risposta per maggiori dettagli.

— Dagmar

59

Quando apri font-awesome.min.csspuoi vedere il seguente percorso:

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

Significa che devi creare la directory Fontse quindi copiare i file fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) in questa cartella. Dopodiché tutto dovrebbe funzionare bene.

— user2980426
fonte

Poiché almeno 0.8.1 font-awesome non è referenziato. Ci sono tre summernotefile nella cartella tipo di carattere con le estensioni eot, ttfe woffche hanno bisogno di essere distribuito.

— ficuscr

2

Fai attenzione, in 4.6.3 (se non prima) non lo fontsè Fontse su un sistema case sensitive che causa problemi ...

— Jason

1

perché font awesome non lo dice sul loro sito web? in realtà non è esplicito.

— Matt

Eccezionale! Pensavo che i caratteri dovessero essere nella stessa cartella del css, dovevano essere una cartella in alto.

— Giovani Vercauteren

Inoltre, assicurati che la tua libreria sia aggiornata. Avevo tutti i miei loghi tranne il logo bandcamp. Una volta scaricato l'aggiornamento 4.7 e sostituito i file, ha funzionato.

— Ryan Walker

45

Tieni presente che la nuova versione (5) di font awesome usa "fas"o al "fab"posto del "fa"prefisso.

Citato dal loro sito web:

Il prefisso fa è stato deprecato nella versione 5. La nuova impostazione predefinita è lo stile fas solid e lo stile fab per i marchi.

Questo è il motivo per cui i miei caratteri mostravano quadrati vuoti. Ora risolto.

Codice di esempio:

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

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

— krystonen
fonte

Che ha fatto per me! Strano che non sia stato aggiornato nella documentazione

— GroomedGorilla

Questa era l'unica cosa che funzionava. Se stai usando una versione moderna, usa questa.

— samurdhilbk

RISPARMIO IN DIRETTA! cambiare in "fa fa-bar" borked

— brutto

Grazie, per me alcune icone funzionano con fas e altre con fab, ad esempio fab fa-twitter va bene ma fas fa-twitter mostra un quadrato bianco, vai a capire!

— user1620090

Quindi, se la nuova versione è fas, perché devo cambiare le mie classi da "fas" a "fa"

— Sam

22

Per prima cosa, controlla di avere class = "fa" e qualunque sia la classe dell'icona. Quindi, non solo

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

Ma anche

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

Quindi funziona come previsto. Questo ha risolto il mio problema.

— Un'altra domanda
fonte

1

Questo ha funzionato per me. Per me il favoloso fa-envelop non funzionava, ma poi fa fa-envelope funzionava. Molto strano ma ha risolto il mio problema.

— Jordan Schuetz

@JordanSchuetz "fab" è specifico per le icone del marchio, come "fab fa-facebook-f". Nelle versioni più recenti, troverai "fas" per la variazione "solida", così la tua verrà fissata a "fas fa-envelope" nelle versioni più recenti, o "fa fa-envelope" in una più vecchia.

— Tessa

20

Apri il tuo font-awesome.css c'è un codice come:

@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;
}

devi avere una cartella come:

font awesome -> css
 -> fonts

o il modo più semplice:

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

— Erga Kandly
fonte

11

Verifica che il percorso del tuo CSSfile sia corretto. Preferiscono piuttosto i link assoluti, sono più facili da capire poiché sappiamo da dove partiamo e anche i motori di ricerca li preferiranno rispetto ai link relativi. E per ridurre la larghezza di banda usa piuttosto il collegamento da server fantastici di font:

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

Inoltre, se lo usi, non sarà necessario caricare caratteri extra sul tuo server e sarai sicuro di puntare al CSSfile giusto , e potrai anche beneficiare immediatamente degli ultimi aggiornamenti.

— Valentin Mercier
fonte

10

Ho fatto lo stesso e ho ancora solo la scatola quadrata

— Vipul Hadiya

5

avevo a che fare con lo stesso problema, poi ho capito che dovevo usare la nuova versione (5 e più)

usa questo cdn funzionerà.

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

— Halid
fonte

4

Per cominciare, non dovresti avere sia font-awesome.css e font-awesome.min.css

In genere, utilizza font-awesome.cssdurante lo sviluppo, quindi passa a font-awesome.min.cssquando sei soddisfatto del sito.

Problemi come questo sono spesso causati da percorsi e posizioni relativi, quindi controlla dove si trova il tuo file html rispetto al css.

Se il tuo file html si trova nella directory di base e il css in una sottocartella fuori dalla radice, avrai bisogno di: href="./css/font-awesome.css"(punto singolo)

— Paolo
fonte

4

Tutto quanto sopra è corretto, tuttavia il problema è che ho scaricato la versione gratuita di FA5 che non ha:

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

Non riuscivo a far funzionare la v5, quindi sono tornato alla 4.7.0 con l'aiuto dei post sopra e ha risolto il mio problema.

— Mickers
fonte

1

Ho avuto problemi con il funzionamento anche della v5 + di FontAwesome. Avevano cambiato la loro cartella "webfonts" in "fonts" nel css, e l'avevano inserita nello stesso modo, e non funzionava correttamente. File sostituiti con v4.7.0 e funziona a meraviglia. Hrm.

— Lisa Cerilli

1

Nella versione 5, la famiglia di caratteri per le icone non è più "FontAwesome". Nella versione gratuita, ora è "Font Awesome 5 Free" e "Font Awesome 5 Pro" nella versione pro. Stavo riscontrando questo problema quando stavo usando manualmente i codici dei caratteri in alcuni punti e hanno smesso di funzionare a causa della famiglia di caratteri non impostata.

— Tessa

4

stavo affrontando lo stesso problema .. quindi invece di scaricare font awesome, ho aggiunto un collegamento nel mio codice html e ha funzionato.

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

Espandi lo snippet

— Hrithik verma
fonte

Grazie mille, ho impiegato 24 ore per risolvere questo fantastico problema

— Mathew Magante

2

Ho installato correttamente Font Awesome usando il loro CDN e javascript include (come descritto in questa pagina ). Quindi ho provato a copiare HTML e CSS su alcune pagine legacy e improvvisamente ho visto caselle quadrate vuote invece delle icone.

Ho visto la risposta di Daniel (sopra) e poiché il mio file CSS precedente era enorme (e vecchio di anni) ho sospettato che fosse quello il problema. Tuttavia, quando ho guardato in Chrome DevTools sembrava davvero che Font Awesome fosse caricato:

Mi aspettavo di vedere il carattere barrato se ci fosse un problema ... Tuttavia avevo davvero esaurito tutte le mie opzioni, quindi ho controllato gli stili calcolati e ho visto chiaramente che il carattere Font Awesome non era decisamente utilizzato. (Vedi il carattere renderizzato in basso)

Il mio file CSS precedente era un disastro e ho preferito non toccarlo, quindi ho imbrogliato in questo modo - per favore non dirlo a nessuno :)

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

Inoltre da notare, quando ho aggiornato da Font Awesome versione 4.7.0 alla versione 5.4.1 questo problema è andato via! Ho usato questa guida all'installazione e questo HTML

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

— Dagmar
fonte

2

Per quelli di voi che utilizzano SCSS e il pacchetto NPM, ecco la mia soluzione:

npm i --save @fortawesome/fontawesome-free

Quindi nella parte superiore di un file SCSS (idealmente un file SCSS importato nella radice dell'applicazione):

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

— Jeff Diederiks
fonte

Interessante aggiunta @fortawesome/fontawesome-free/css/all.cssrisolto

— Andy Braham

1

Nel mio caso: devi copiare l'intera cartella font-awesome nella cartella css del tuo progetto e non solo il file font-awesome.min.css .

— sst
fonte

1

Quindi sembra che l'aggiunta style='font-weight:normal;'o la modifica del carattere direttamente sull'elemento sovrascriva la .fas{font-weight:900}definizione nel file CSS di Font Awesome. Immagino che il carattere abbia definizioni specifiche all'interno del file del carattere con cui funziona. Sembra che il carattere font-weightdebba essere impostato tra 501 e 1000, o il carattere potrebbe sembrare un blocco quadrato.

— James Wilkins
fonte

1

il mio problema era quello che aveva la maggior parte dei voti

*{
font-family: xxxxx
}

cambiarlo in questo ha risolto il problema

body{
font-family: xxxx
}

— Jamsheer
fonte

0

Potresti aver utilizzato un VCS (git o qualcosa del genere) per trasferire i file delle icone sul server. git dice:

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.

Probabilmente dovrai correggere i tuoi caratteri.

— rishta
fonte

0

Penso che tu non abbia la cartella dei caratteri nella cartella principale come dove si trova la cartella CSS.

Demo

E la cartella CSS è come

E la cartella dei caratteri come

Spero che funzioni per te.

Grazie.

— Obaidul Haque
fonte

0

Su MacOS Mojave, ho riscontrato questo problema in Safari. Le fantastiche immagini dei caratteri funzionavano in Chrome ma non in Safari, quindi ero sicuro che non fosse il sito.

Li ho resi visualizzabili andando su Preferenze nel menu Safari e disattivando / deselezionando "Impedisci tracciamento cross-site" nella scheda Privacy.

Non sono sicuro del motivo per cui questo l'ha risolto, ma lo ha fatto.

— Michael Shulman
fonte

0

Basato sulla versione 5.10.1.

La mia soluzione (localmente):

Se stai usando "fontawesome.css" o "fontawesome.min.css", prova a usare "all.css" (che si trova nella cartella css).
La cartella "css" e la cartella "webfonts" dal pacchetto fontawesome che hai scaricato devono trovarsi allo stesso livello l'una dell'altra.

Nel mio caso, avevo già una cartella css, quindi ho rinominato la cartella css fontawesome in "css-fa".

Con "css-fa" e "webfonts" nella mia cartella css, collegalo semplicemente correttamente nel tuo editor di testo e dovrebbe funzionare.

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

— Tou Toua Yang
fonte

0

risolto la modifica del selettore della famiglia di caratteri! importantized mirato da * { ... } a *:not(i) { ... }

(con preprocessore scss); spero che tu abbia risolto

— backciro
fonte

0

Il codice seguente è fantastico per i caratteri 4.70.0. Per passare a font-awesome 5.11.2, fai clic qui .

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

Sto usando FontAwesome Pro e la soluzione per me era incorporare all.min.cssinvece di fontawesome.min.css.

— Bruno Leveque
fonte

0

Stavo seguendo questo tutorial per ospitare personalmente Font Awesome Pro 5.13.

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

Per qualche motivo non sono riuscito <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">a caricare webfontsciò che a sua volta ha mostrato solo i quadrati. Ma quando ho usato <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>tutto ha iniziato a funzionare. Entrambi i collegamenti sono stati aggiunti in HTML <head>.

— Ogglas
fonte

il problema con questo js è che il file è

— troppo

0

Stavo cercando di aggiungere fa 5.0.13 a drupal 8 con scss. Gli stili non sono inclusi di default nel fa.scss principale dovevo aggiungerli manualmente.

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

— bonkisama
fonte

0

devi mettere un file fantastico nella cartella CSS e cambiare

da href = "../ css / font-awesome.css" a href = "css / font-awesome.css"

Un'altra cosa puoi sostituire questo fantastico file CSS e provare questo

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

Espandi lo snippet

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

Espandi lo snippet

— De Zin Htang
fonte

Funziona molto bene con questo

— 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

Attenzione a Bootstrap! Bootstrap sovrascriverà le classi .fa. Se stai portando entrambi i pacchetti separatamente pensando "Userò Bootstrap per la gestione reattiva dei blocchi e Font-Awesome per le icone", devi indirizzare le classi .fa all'interno di Bootstrap in modo che non interferiscano con lo stand di Font-Awesome- sola implementazione.

es: font-family 'FontAwesome' in Bootstrap interferirà con font-family 'Font Awesome 5 Free' in Font-Awesome e otterrai una casella bianca invece dell'icona che desideri.

Potrebbero esserci modi più puliti per gestire questo problema, ma se hai esaminato la lista di controllo cercando di risolvere il problema della "scatola bianca" e ancora non riesci a capirlo (come ho fatto io), questa potrebbe essere la risposta che stai cercando per.

— jtubre
fonte

Perché il voto negativo? È un caso limite, ma è una causa non facilmente reperibile altrove.

— jtubre

-1

Nel mio caso, il problema è stato causato dall'utilizzo di alcuni stili regolari ( far) che non sono inclusi nel set gratuito. Modifica per fasrisolverlo.

— Yngve Høiseth
fonte