2013-08-22 12 views
5

sto provando a usare Font Awesome ma invece di qualsiasi icona mostra solo segni asiatici. Ho scaricato il font awsome dal webserver per quello. Ho provato questo in 3 diversi browser (firefox, opera e cromo) ma è sempre lo stesso.Font impressionante con segni asiatici anziché icone

Un TestPage può essere visto qui: http://2weitweitweg.de/test.html

Ed ecco uno screenshot di esso: http://postimg.org/image/9yh5p0p97/

si manifesta i segni nel browser? Il problema è legato al browser o al server? Come posso aggiustarlo?

bye

risposta

2

stesso come me troppo, opere di carattere-impressionante sul mio browser per PC [tutti], ma poi ho provato font-impressionante su un browser mobile del Java opera [l'ultima versione del browser Opera per i cellulari Java (c2-03 per la precisione)] vedo solo segni/caratteri/simboli asiatici, a volte vedo scatole, al posto dei simboli fantastici del font. spero che questo sarà risolto?

4

Molto probabilmente i file di font effettivi non vengono trovati. Se si guarda nel file CSS impressionante carattere probabilmente vedrete qualcosa di simile a:.

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
    [...etc] 

Questo si aspetta di trovare i file di font in una cartella denominata carattere allo stesso livello che il file CSS è in Ad esempio:

Se i file sono nella posizione corretta è possibile che non vengano caricati a causa di qualche problema con le autorizzazioni o anche che si stia utilizzando uno strano browser che non supporta correttamente @ font-face. Ovviamente è possibile escludere quest'ultimo visitando lo font awesome examples page per vedere se visualizza correttamente le icone.

+0

se il file html che dovrebbe mostra che il testo non è in myproject ma in una cartella diversa ... Il percorso dei file font deve essere relativo al percorso del file css come "root" o è il file html che include il file css t lui radice? – Jonas

8

Ho avuto questo problema ed era perché stavo usando vecchio HTML con una nuova versione fontawesome.

ho riparato cambiando:

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

a:

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

Vale a dire Ho appena dovuto aggiungere la classe di default fa all'elemento.

L'ultima versione utilizza il prefisso fa ma, per voi, suppongo che potrebbe essere icon invece.

Spero che questo aiuti qualcuno a un certo punto :-)

+0

mi ha aiutato, grazie :) – whizcreed

0

Se si utilizza 4.0 o poi, hanno cambiato le icon classi per fa classi Così il vostro codice dovrebbe dire

<i class="fa fa-camera-retro fa-large"></i> 

invece di

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

Potete trovare alcune icone, esempi di codice specifici visitando http://fontawesome.io/icons/ e facendo clic/toccando l'icona che ti serve.

Ho avuto questo stesso problema durante l'aggiornamento da 3,2 a 4.0.3

2

Speranza Io non sono troppo tardi, qualcosa sul vostro server non è configurato correttamente, la soluzione è quella di permettere * .woff e * .tff da richiedere come risorse statiche, proprio come si fa con * css e * .js, questo è fatto in modo diverso a seconda della piattaforma:

enter image description here

Quello che ho fatto per farlo funzionare:

sostituito il foglio di stile con (dal momento che non possiamo g et alle risorse):

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> 

e sostituiti tue vecchie classi Icon- *, per esempio:

<i class="fa-umbrella fa text-error"></i> 

E ora funziona:

enter image description here

Problemi correlati