2013-06-26 7 views
69

Sono un principiante nello sviluppo web e di recente ho iniziato a lavorare con Twitter Bootstrap, so che utilizza Glyphicons che so già come utilizzare. Ma ho anche trovato Font Awesome che dice che è stato creato per Bootstrap.Font Awesome vs Glyphicons in Twitter Bootstrap

Quali sono le differenze tra i due? Voglio dire è uno un'alternativa per l'altro? O dovresti usarli in posti diversi?

risposta

12

Font awesome è una raccolta di icone vettoriali ottenute utilizzando un font specifico e alcuni css per creare la "magia", Glyphicons utilizza la tecnica sprite-css.
Li entrambi possono usare, basta aggiungere il file css dopo un di Bootstrap.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/> 

Se non si desidera avere glyphicons, ma solo quello font-impressionante si dovrebbe andare here e personalizzare il download Bootstrap per farlo, senza glyphicons.

+13

I glyphicon forniti con il bootstrap ora usano anche il metodo font! http://getbootstrap.com/components/#glyphicons – Neo

+0

Come? Il tuo link fornisce informazioni sull'uso dei glyphicon in modo vettoriale. – trante

+4

I nuovi glyphicons per Twitter Bootstrap sono già in formato vettoriale. –

60

In Bootstrap 2.x.x Glyphyicons erano in formato immagine, quindi non è possibile aumentare le dimensioni, modificare il colore, background-color, ecc facilmente. Tuttavia, font-impressionante ti dà icone vettoriali scalabili che possono immediatamente essere personalizzati - dimensione, colore, goccia-ombra, e tutto ciò che può essere fatto con la potenza di CSS.

Font-impressionante è davvero un'alternativa per Glyphyicons che è sempre aggiornato il time-to-time con nuove icone. Fat e Mdo stanno pianificando di integrare Font-awesome nella versione 3 di bootstrap in sostituzione di Glyphyicons.

Il mio suggerimento è di utilizzare bootstrap con font-awesome. In primo luogo comprendere css bootstrap e css poi Font-impressionante, in modo che i Glyphyicons saranno esclusione dal font-impressionante.

UPDATE

In versione bootstrap 3.x.x glyphicons diventano formato di carattere, che renderà bene anche in 12px font-size. Se stai usando l'ultima versione di fontawesome, ovvero 4.01, puoi utilizzare entrambi i glyphicon con fontawesome.

+17

+1, ma l'integrazione con Font Awesome non è stata implementata in Bootstrap 3. FA non è ufficialmente affiliata a Twitter, oltre a supportare Bootstrap 2 out of the box. Ecco un [confronto di diversi pacchetti di font icon] (http://tagliala.github.io/vectoriconsroundup/) che supportano il bootstrap. – jrhorn424

+1

@ jrhorn424, questa è una tabella di confronto sorprendente! Grazie! Aggiornamento – KyleMit

+0

: Bootstrap 4 non spedisce più Glyphicons. – MushyPeas

25

Font Awesome: - Oltre 150 più icone - Pixel perfetto a carattere predefinito bootstrap (14px) - Le icone non hanno le stesse dimensioni e richiedono CSS personalizzato per ogni allineare - Ha elenco puntato, rotazione (can si aggiungono con css3), icone impilati, ed animazione filatore (può essere aggiunto manualmente ) Glyphyicons: - meno icone - Pixel Perfect a grande dimensione del carattere (16px) - icone dimensioni stesso

veda: http://tagliala.github.io/vectoriconsroundup/

A side-by-side comparison between popular icon fonts made for Bootstrap.

5

Proprio l'aggiornamento a questa domanda al aiuta ulteriormente.

Ora nel 2016 la tendenza è caratteri di materiale google. IMHO sono più belli di glyphicon e font fantastico, sembra più piatto e ci sono più di 350 icone per l'uso.Libero distribuito qui: https://design.google.com/icons/

posso elencare alcuni vantaggi di usare le icone piane e design dei materiali anche, Materiale design offre prestazioni sorprendenti per il vostro Android APP. Material Design è un framework di visual design sviluppato da Google nel suo Android L OS (Android 5.0). Il framework di progettazione dei materiali funziona con tutte le piattaforme Android ed è noto per l'interfaccia grafica piatta. Il nuovo framework di progettazione visiva di Google è piatto, elegante e vivace, creando un'esperienza Android unificata.

Branding Il design del materiale utilizza oggetti piani e leggeri. Richiede solo 2-3 colori per marcare l'intera APP. il design dei materiali è facile da marchiare le APP che sviluppi.

User Engagement Nell'era di Internet è molto importante coinvolgere gli utenti. Devi comunicare costantemente con gli utenti attraverso la tua APP. L'impegno degli utenti è uno dei fattori chiave del successo. Il 35% delle APPS Smart-Phone viene utilizzato solo una volta nella vita dell'utente che ha installato l'APP. Il design dei materiali fornisce un linguaggio visivo tra l'utente e te.

MIGLIORE UI/UX UI/Ux è il mezzo di comunicazione tra voi e l'utente. Bad UI farà sì che l'utente disinstalli la tua APP.

Material Design si prende cura dell'esperienza dell'utente. Interagisce profondamente con l'utente. Material Design ha responsive interazioni & significative. Puoi deliziare l'utente integrando il design dei materiali nella tua app.

+1

Marketing blurb – Savage

+0

Anche in memoria è molto più costoso – JustinJmnz