Font impressionante icona che mostra come quadrato in cromo?

Question

Sto provando ad usare un'icona font-awsome all'interno di un pulsante. L'icona funziona bene in firefox ma quando la uso in chrome appare come un quadrato. Mi sono guardato intorno e l'unica cosa che ho trovato è che i percorsi dei caratteri potrebbero non essere giusti, tuttavia ho provato la versione cdn here e funziona ancora in firefox ma non in chrome.

Inoltre ho provato gli stessi fogli di stile in un file html statico sul mio computer funziona correttamente.

Ecco un esempio di codice HTML in uso:

<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled"> 
    <i class="icon-refresh icon-white"></i> 
    Sign in using Facebook 
</a> 

E anche la web app è costruito con le rotaie e sta usando bootstrap per i modelli.

Qualche idea su cosa potrebbe causare questo?

Answer 1

Ho avuto lo stesso problema. Ma l'ho risolto facilmente.

In Font file font impressionanti deve essere posto in "font" directory invece che "font " directory nelle versioni precedenti.

Answer 2

La risposta di cui sopra è corretta, ma volevo chiarire un ulteriore passo perché non penso che sia chiaro sulla pagina di carattere impressionante per iniziare. Ho aggiunto il foglio di stile min.css e collegato ad esso nella sezione head della mia pagina. Avrai anche bisogno di prendere i cinque font e metterli nella cartella "fonts" del tuo progetto. Non ci dovrebbero essere cinque file e si concluderà a:

.eot Svg .ttf .woff .otf

ho recuperato i file da github qui: https://github.com/FortAwesome/Font-Awesome

Answer 3

Se avete tutto nel posto giusto (e anche controllato il css per assicurarsi che i percorsi sono a destra e ti stai chiedendo se è necessario un file js), prova a guardare il codice HTML:

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

Questo mostrerà il quadrato con numeri/lettere all'interno menzionati nella domanda (invece dell'icona).

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

Questo mostrerà la tua icona! Ricorda che nella versione 4.2.0 devi aggiungere la classe fa!

Spero che aiuti!

Answer 4

Per me questo problema era dovuto a un numero 4 randagio in uno dei miei file CSS.

Mi stavo strappando i capelli e ho usato tutte le correzioni sparse senza successo, ma dopo aver aperto un file CSS completamente indipendente e aver trovato il numero 4 alla fine del documento e averlo rimosso, ha funzionato perfettamente.

Quindi controllare ogni file CSS per i caratteri vaganti.

Answer 5

Ho lo stesso problema e finalmente ho trovato qual è il problema. È perché ho scavalcato lo font-family del tag <i> in qualcos'altro.

Answer 6

Risposta molto tarda, ma questo potrebbe aiutare un altro fratello là fuori!

Ho scoperto che questo comportamento è stato risolto da NON avendo display: block; sull'elemento i/.fa.

.fa è un blocco in linea standard, ma l'ho modificato in blocco per una migliore compatibilità con i vecchi browser, ma deve essere in linea o forse qualcos'altro.

Spero che aiuti qualcuno là fuori!