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?

css  html  twitter-bootstrap  font-awesome 
— Connor Black
fonte
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.

— mayhewr
fonte
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>
— Nabil Kadimi
fonte
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

— Kumar Deepam
fonte
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.

— Bren1818
fonte
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;
}
— jonschlinkert
fonte
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">
— Erga Kandly
fonte
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">
— Vojkan Cvijanovic
fonte
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.

— shaijut
fonte
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>
— Israele
fonte
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.

— Jonny White
fonte
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 ... "

— Philipp
fonte
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!

— J Doe
fonte
4

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

— tronic
fonte
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>
— ehacinom
fonte
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.

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

— the_haystacker
fonte
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");
}
— SantoshK
fonte
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">
— live-love
fonte
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!

— BabaNew
fonte
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.

— André Duarte
fonte
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.

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

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

— Ross
fonte
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>
— Enrique Martinez
fonte
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.

— Dipesh Chauhan
fonte
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.

— Tim
fonte
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>
— user3325776
fonte
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.