Carattere Fantastico non funzionante, icone mostrate come quadrati


224

Quindi sto cercando di prototipare una pagina di marketing e sto usando Bootstrap e il nuovo file Font Awesome. Il problema è che quando provo a usare un'icona, tutto ciò che viene visualizzato sulla pagina è un grande quadrato.

Ecco come includo i file nella testa:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

Ed ecco un esempio del mio tentativo di utilizzare un'icona:

<i class="icon-camera-retro"></i>

Ma tutto ciò che viene reso in una grande piazza. Qualcuno sa cosa potrebbe succedere?


1
Stai importando il carattere?
Mayhewr,

1
Probabilmente no. Pensavo che dovessi includere solo il .cssfile.
Connor Black,

2
Il titolo implica che il problema è specifico di Chrome. Si sta caricando in altri browser o il file di font a cui viene fatto riferimento sta visualizzando un 404?
cimmanon,

1
Non riesci a trovare il passaggio 3 sul link sopra a partire da agosto 2016 ... Eventuali reindirizzamenti ??
Saurabh Tiwari,

1
Probabilmente hai dimenticato di copiare la cartella webfont?
autorizza l'

Risposte:


149

Secondo la documentazione (passaggio 3), è necessario modificare il file CSS fornito per puntare alla posizione del carattere sul sito.


5
Ottima risposta, solo per dare alcune informazioni aggiuntive, puoi anche posizionare i caratteri nel percorso predefinito fornito dal css, basta aprire Font-awesome.css e troverai la seguente voce: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
Braulio

1
Solo per i futuri lettori ASP.NET MVC con lo stesso problema: se hai tutte le cartelle nella posizione corretta, verifica se hai aggiunto il tipo MIME sul tuo file web.config come indicato qui: stackoverflow.com/questions/4015816/…
jpgrassi,

1
Se si utilizza lo schema URI dei dati con una versione base64 del carattere (può essere facilmente convertito online), non è necessario preoccuparsi del percorso corretto del file e dell'hosting delle risorse.
RenaissanceProgrammer,

Nota : se non si desidera modificare il CSS, basta inserire CSS e font nella stessa cartella, controllare questo
shaijut

7
@tutuca: non tutti possono usare un CDN.
Razze di leggerezza in orbita

188

È necessario disporre di 2 classi, la faclasse e la classe che identifica l'icona desiderata fa-twitter, fa-searchecc ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

4
Questa dovrebbe essere la risposta migliore, il CSS ha fornito i punti nella posizione giusta per i file dei font, purché tu non li sposti - questo mi stava facendo salire sul muro, grazie
alex3410,

5
Nota: "Il prefisso fa è stato deprecato nella versione 5. Il nuovo valore predefinito è lo stile solido fas e lo stile favoloso per i marchi."
Terje Solem,

1
Questo mi ha risolto! Sto usando Angular (5 credo) insieme a primeng e sembra che quel font-fantastico abbia già funzionato per es. Le definizioni MenuItem all'interno di xx.component.ts (le icone sono state visualizzate correttamente). Tuttavia: quando si aggiunge qualcosa a xx.component.html (ad es. Pulsante p con un'icona), si deve aggiungere la classe fa e fa- <qualunque icona>!
Igor,

1
@TerjeSolem le informazioni che hai fornito sono molto importanti. Ha risolto il mio problema. dato che stavo usando la versione precedente ma stavo usando "fas" grazie
MindRoasterMir,

🤦‍♂️ Grazie mille! Ho ottenuto lo stesso con le icone aperte oi -... Ho perso il primo oi.
Alexandr

54

Usa questo

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

Ho avuto un problema simile con Amazon Cloudfront CDN ma si è risolto dopo aver iniziato a caricarlo da maxcdn


6
questo presuppone che tu voglia usare la CDN di font-awesome. Per un ambiente di produzione commerciale non lo farei.
Jay Edwards,

48

Questo può aiutare, controlla per assicurarti di non aver inavvertitamente cambiato la famiglia di caratteri sull'icona. Se hai modificato la famiglia di caratteri dell'elemento .fa da: FontAwesome l'icona non verrà visualizzata. È sempre qualcosa di sciocco e piccolo.

Spero che aiuti qualcuno.


11
BINGO! Grazie mille. Metro-UI stava sovrascrivendo la fantastica famiglia di font. Ho dovuto aggiungere questo: .fa {font-family: 'FontAwesome'! Important; } poi ha funzionato.
Debbie A

1
Sì. Sciocco e piccolo. Questo - cambiare il carattere per qualcos'altro e influire sulle icone fantastiche - mi è successo così tante volte che sta diventando stupido.
Edd,

2
Sì, questa linea era da incolpare (per essere più precisi, la! Regola importante): * {font-family: 'Source Sans Pro'! Important}
Svet

1
Questo è il consiglio più importante e utile sull'uso di Font Awesome per evitare di perdere tempo a trovare un problema.
Dez,

22

Se stai usando LESS o SASS, apri il file font-awesome.less / sass e modifica la variabile path @fa-font-path: "../font";che punta ai caratteri effettivi:

@fa-font-path: "../font";

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Lo stesso con i CSS, tranne per il fatto che si modifica il percorso nel blocco di dichiarazione @ font-face:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Esiste un modo per importare solo determinate icone anziché tutte? Vorrei solo compilare il mio file CSS in poche icone.
user805981

@fa-font-path: "../fonts";ha funzionato per me. (Notate il mancante saggiunto)
prograhammer

18

Apri il tuo codice font-awesome.css 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">

13

Ho provato a risolvere lo stesso problema con alcune soluzioni precedenti, ma non hanno funzionato nella mia situazione. Infine, ho aggiunto queste 2 righe in HEAD e ha funzionato:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">   

12

sto usando Font Awesome 4.3.0solo il collegamento da maxcdn funziona come menzionato qui ,

ma ospitare nel tuo server inserendo font e css nella stessa cartella ha funzionato per me, in questo modo

inserisci qui la descrizione dell'immagine

quindi basta collegare il CSS:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

la speranza aiuta qualcuno.


8

Devi avere 2 classi, la classe fas e la classe fa, forse questo funzionerà:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>

3
Non ce ne siamo resi conto - dalla v5 ora richiedono una fabo fasclasse invece della faclasse.
Echilon,

7

Ho avuto questo problema. Il problema era che avevo uno stile CSS della famiglia di caratteri con! Important override the fontawesome font.


Ho avuto lo stesso problema con * {font-family: Helvetica, sans-serif! Important; }
Dubbo

6

Nel caso in cui lavori con Maven e Apache Wicket, controlla anche quanto segue per provare a risolvere il problema con Font-Awesome e le icone non vengono caricate:

Se hai inserito i tuoi file, ad esempio, nella seguente struttura di file

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Verifica 1) Stai utilizzando correttamente una protezione delle risorse del pacchetto per consentire di caricare correttamente i file dei caratteri?

Esempio dalla tua classe che estende WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Verifica 2) Dopo aver verificato che tutti i caratteri siano stati trasferiti correttamente nel browser Web, verificare che cosa sia stato effettivamente trasferito nel browser Web, ovvero l'integrità dei file dei caratteri è cambiata? Confronta i file nella directory di origine e i file trasferiti al browser Web utilizzando, ad esempio, la barra degli strumenti per sviluppatori Web di Firefox e DiffDog (per il confronto dei file).

In particolare se si utilizza Maven, tenere presente il filtro delle risorse. Non filtrare la cartella in cui sono contenuti i tuoi file / font - altrimenti saranno danneggiati.

Esempio dal tuo pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

Nell'esempio sopra non filtriamo la cartella src / main / java, dove sono contenuti i file css e font.

Per ulteriori informazioni sul filtraggio dei dati binari, consultare anche la documentazione:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

In particolare la documentazione avverte: " Avvertenza: non filtrare i file con contenuto binario come le immagini! Ciò provocherà molto probabilmente un output corrotto. Se si hanno sia file di testo che file binari come risorse, è necessario dichiarare due serie di risorse reciprocamente esclusive. Il primo set di risorse definisce i file da filtrare e l'altro set di risorse definisce i file da copiare inalterati ... "


6

Ho avuto questo problema e ho esaminato attentamente ogni passaggio ... anche se utilizzo FA da anni ... e poi ho capito di avere questa riga nel mio file css di posta:

* {
font-family: Arial !important;
}

Errore sciocco, ma questo potrebbe dare la mancia a qualcuno in futuro!



4

Devi riportare l'intestazione Access-Control-Allow-Origin su * per i tuoi file di caratteri


2
Esattamente! L'uso di provider di terze parti per servire i tuoi fantastici file di font non risolve il tuo problema, devi solo passarlo ad altri per essere risolto.
Simanas,

4

A partire da dicembre 2018, trovo più facile usare la versione stabile 4.7.0 ospitata su bootstrapcdn invece del fantastico cdxx 5.xx sul loro sito Web - poiché ogni volta che aggiornano le versioni minori la versione precedente si romperà.

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

Le icone sono le stesse:

<i class="fa fa-facebook"></i>


3

font-weight: 900;

Ho avuto un altro problema con Font Awesome 5. Il peso predefinito del font dovrebbe essere 900 per le icone FontAwesome ma l'ho sovrascritto a 400 per i tag span e i. Ha funzionato, quando l'ho corretto.

Ecco il riferimento al problema nella loro pagina Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

Spero che possa aiutare qualcuno.


1
grazie anche questo è stato il mio problema. Ho impostato Font-Family su "Font Awesome 5 Free" ma avevo bisogno che anche il font-weight fosse impostato su 900!
Hans Vonn,

3

Se si utilizza la versione 5. * o successiva, è necessario utilizzare il

all.css o all.min.css

L'inclusione di fontawesome.css non funziona in quanto non ha alcun riferimento alla cartella webfonts e non esiste alcun riferimento a @ font-face o font-family

Puoi verificarlo cercando il codice per la proprietà della famiglia di caratteri in fontawesome.css o fontawesome.min.css


questa è stata la soluzione perfetta per me - peccato che la risposta sia così in basso, non l'ho vista e ho dovuto
capirla

2

Potrebbe essere possibile che il percorso del carattere non sia corretto, in modo che css non sia in grado di caricare il carattere e visualizzare le icone, pertanto è necessario fornire il percorso bloccato dei caratteri collegati.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}


2

A partire dalla versione 5, se hai scaricato il pacchetto da questo sito:

https://fontawesome.com/download

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

Ecco come apparirà il tuo riferimento usando ora l'ultima versione (sostituisci con la tua cartella):

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

2

Dopo aver lottato per trovare una soluzione e NON aver trovato utile la documentazione ufficiale, questo ha risolto il problema per me:

  1. Scarica Fontawesome.zip. Sto usando la versione 5.10.2 e l'ho presa da qui https://fontawesome.com/download
  2. All'interno del file zip ci sono diverse cartelle. Hai solo bisogno di cartelle css e webfonts inserisci qui la descrizione dell'immagine

    1. Crea 2 cartelle nei tuoi progetti web e chiamale css e webfonts. inserisci qui la descrizione dell'immagine

Questi nomi sono obbligatori Ora copia il contenuto di css e webfonts dalla zip nelle cartelle corrispondenti nel tuo progetto. E questo è tutto!

Attenzione fantastico! Awesomeness sta rendendo le cose semplici per l'utente!


1

Ho cambiato dalla 3.2.1 alla 4.0.1 e la cartella era font e ora si chiama font.

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ fonts / fontawesome-webfont.eot? v = 4.0.1');

Spero che aiuti qualcuno.


1

Uso il carattere ufficiale Awesome SASS Ruby Gem e risolto l'errore aggiungendo la riga seguente al mio application.css.scss

@import "font-awesome-sprockets";

Spiegazione:

Il file font-awesome-sprockets include le funzioni Sass dell'assass dell'assest pignoni utilizzate per trovare il percorso corretto per il file del font.


1

se stai usando sass e lo hai importato in main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

L'errore può provenire dal file font-awesome.scss che sta cercando i file dei caratteri nel relativo percorso.

Quindi ricorda di sovrascrivere la variabile $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

in questo modo non è necessario aggiungere cdn nel tuo index.html


1

Controlla due volte il file fontawesome-all.css: in fondo ci sarà un percorso alla cartella webfonts. Il mio aveva il formato "../webfonts", il che significava che il file css sarebbe stato di 1 livello da dove si trova. Dato che tutti i miei file CSS erano nella cartella CSS e ho aggiunto i caratteri alla stessa cartella, questo non funzionava.

Basta spostare la cartella dei caratteri su un livello e tutto dovrebbe andare bene :)

Testato con Font Awesome 5.0


Questa dovrebbe essere la risposta preferita poiché risponde direttamente alla domanda senza collegarsi a documentazione obsoleta. Kudos
Kyle Champion il

1

Avevo lo stesso problema con il font 5 fantastico scaricato con filato, ho aggiunto il file min.css LUNGO con il file all.js.

Spero che questo aiuti qualcuno a qualcuno

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

1

Il file /css/all.css contiene lo stile di base più tutti gli stili di icone necessari per usare Font Awesome. La cartella / webfonts contiene tutti i file dei caratteri tipografici a cui fa riferimento il CSS sopra e da cui dipende.

Copia l'intera cartella / webfonts e /css/all.css nella directory degli asset statici del tuo progetto (o dove preferisci conservare risorse di front-end o elementi del fornitore).

Aggiungi un riferimento al file /css/all.css copiato in ogni modello o pagina su cui vuoi usare Font Awesome.

Basta visitare - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Riceverai la risposta.


0

L'utilizzo di percorsi assoluti anziché relativi ha risolto il problema per me. Stavo usando percorsi relativi (vedi il primo esempio di seguito) e non ha funzionato. Ho controllato tramite console e ho scoperto che il server stava restituendo un 404, i file non sono stati trovati.

Il percorso relativo ha causato un 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Percorso assoluto risolto nel browser:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

Non consiglierei di farlo a meno che non sia necessario, ma funziona per me. Naturalmente, dovresti ripetere questo per tutti i formati di carattere nel file font-awesome.css.


0

Non funzionava per me perché avevo una Allow from nonedirettiva per la directory principale nella mia configurazione di Apache. Ecco come l'ho fatto funzionare ...

La mia struttura di directory:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

dove il mio index.html ha:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

Ho scelto di continuare a non consentire l'accesso al mio root e invece ho aggiunto un'altra voce di directory nella mia configurazione di apache per root / font-awesome /

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
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.