Carattere Fantastico non funzionante, icone mostrate come quadrati

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?

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

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

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

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.

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

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

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

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

quindi basta collegare il CSS:

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

la speranza aiuta qualcuno.

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>

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

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

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!

Questo dovrebbe essere molto più semplice nella nuova versione 3.0. Il più semplice è fare riferimento al Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

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

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>

Se il tuo server è IIS, assicurati di aggiungere il MIME corretto per servire l'estensione del file .woff. Il MIME corretto èapplication/octet-stream

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.

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

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");
}

Usa questo <i class="fa fa-camera-retro" ></i>non hai definito le classi fa

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

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

   3. Crea 2 cartelle nei tuoi progetti web e chiamale css e webfonts.

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!

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.

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.

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

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

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>

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.

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.

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>