I caratteri delle icone vengono utilizzati per includere determinate icone standard nel contenuto del tuo sito web. Il Carattere 'Fantastico' è un buon esempio che offre molti vantaggi rispetto ad altri font di icone. Si consiglia inoltre di utilizzare Caratteri delle icone da Freepik come una buona alternativa.
Font Awesome è stato originariamente progettato da Dave Gandy per uso con Bootstrap di Twitter. Font Awesome può essere utilizzato con WordPress utilizzando il Plug-in Font Awesome Icons progettato da Rachel Baker.
Ecco una breve introduzione a tali caratteri e dove il carattere Awesome si inserisce in uno stile che potrebbe essere ancora agli inizi.
Perché usare i caratteri delle icone?
Quando si progetta un sito Web, le immagini occupano molto spazio Web a causa delle dimensioni dei file. Devono anche essere richiamati nelle tue pagine web utilizzando il markup HTML. Non solo, ma il loro ridimensionamento è spesso un problema, perdendo definizione man mano che aumentano di dimensioni. Un'immagine normale si risolve come previsto solo se utilizzata nelle dimensioni originariamente progettate.
Quando cerchi immagini di icone standard, ad esempio per veicoli, determinati caratteri di punteggiatura o icone di grafici, i caratteri delle icone possono offrirti immagini scalabili che hanno lo stesso aspetto indipendentemente dalle dimensioni del carattere. Questo è proprio come le lettere e i numeri appaiono uguali indipendentemente dal fatto che tu usi una dimensione del carattere 2 o 5 o una dimensione del carattere di 10 o 24 punti.
In molti casi, le persone semplicemente non usano le immagini a causa di questo problema e il loro articolo o rapporto online ne risente nei dettagli o nella chiarezza. Usando Font Awesome, possono aggiungere icone di base ai loro siti e ridimensionarli alla dimensione richiesta, limitata solo dalle dimensioni dei loro documenti, e possono farlo senza perdere la definizione. Puoi guardare le icone scalabili allo stesso modo dei caratteri dei caratteri scalabili.
Ecco una selezione del lettore video e delle icone social disponibili:

E anche le nuove icone fornite con la versione 3.0:

Ognuno di questi può essere aumentato di dimensioni senza perdita di definizione. Puoi cambiare il loro colore e aggiungere facilmente ombre e cambiare la loro trasparenza. In effetti puoi fare qualsiasi cosa con loro che puoi con le immagini, e poi alcune, senza gli svantaggi della dimensione del file.
Questo è fondamentalmente ciò che possono fare i caratteri delle icone, e in particolare il carattere Awesome. Ecco alcune informazioni su come usarli e sfruttarli al meglio, e anche uno o due svantaggi associati ai fronti delle icone:
Utilizzo di Font Awesome
Con CSS Bootstrap normale:
Font Awesome può essere utilizzato con il CSS predefinito di Bootstrap copiando la directory dei font Awesome nel progetto e quindi copiando font-awesome.min.css nel progetto. Devi quindi aprire font-awesome.min.css e modificare i percorsi dei caratteri per assicurarti che puntino alla posizione Awesome.
Nella sezione Head del tuo HTML la posizione del font-awesome.min.css dovrebbe essere referenziata in questo modo:
Il percorso del carattere è relativo dalla tua directory CSS.
Con Bootstrap Meno:
Se stai utilizzando Twitter Bootstrap con LESS CSS, copia prima la directory dei font Font Awesome nel tuo progetto e poi font-awesome-less nella tua directory Bootstrap Less. Quindi:
- a) Apri bootstrap.less e sostituisci @import “sprites.less”; con @import “font-awesome.less”;
- b) Apri il font-awesome.less del tuo progetto e modifica la variabile @FontAwesomePath in modo che punti alla directory dei tuoi font.
@FontAwesomePath: "../font";
Il percorso del carattere è relativo dalla directory CSS compilata.
Quindi sei pronto, anche se se stai usando un compilatore statico dovresti ricompilare LESS.
Non usando Bootstrap:
Se non stai usando Bootstrap, dopo aver copiato il file del font nella directory del tuo progetto puoi copiare uno dei due fantastici file di font nel tuo progetto, aprirlo e quindi modificare la posizione del font in modo che punti alla directory dei font.
Se stai utilizzando Internet Explorer 7, usa font-awesome-ie7.min.css
Come usare Font Awesome in WordPress
Ci sono due semplici modi per utilizzare i caratteri delle icone in WordPress uno in cui hai caricato il plug-in*. Puoi incorporarli utilizzando HTML o utilizzare lo shortcode. Ecco alcuni esempi di ciascuno:
Utilizzo dell'HTML: Dove vuoi che appaia il carattere, aggiungi semplicemente il nome dell'elemento al nome della classe in questo modo: [html] [/html]
aggiungerà un cerchio nero.
Puoi modificare la dimensione del cerchio in questo modo:
Probabilmente troverai più facile aggiungere la dimensione del carattere al tuo foglio di stile CSS se intendi utilizzare frequentemente la stessa dimensione dell'icona e il formato sopra per le eccezioni.
Utilizzo dello shortcode: Lo shortcode è più semplice, ma generalmente funzionerà solo per i contenuti dei post e delle pagine nella schermata dell'editor dei post. Il formato è [icon name=icon-circle] dove vuoi il cerchio.
Il rovescio della medaglia dei caratteri delle icone
I caratteri delle icone sembrano ottimi da usare quando hai bisogno di aggiungere un'icona specifica al tuo blog o sito web e possono essere collegati per svolgere funzioni specifiche. Tuttavia, non tutto è perfetto e anche i caratteri delle icone presentano degli svantaggi. Questi sono i problemi comuni segnalati dagli utenti di caratteri icona che non si applicano a Font Awesome - ecco perché è così "Fantastico!"
- Uno è il potenziale problema con gli screen reader che potrebbero leggere ad alta voce l'icona come una lettera alfabetica. Questo non è un problema con Font Awesome a causa del modo in cui vengono recuperati i caratteri dei caratteri.
- Possono essere presentati in un solo colore o in un gradiente di colore utilizzando i gradienti CSS3. È un vero problema con i caratteri delle icone?
- La creazione di un carattere personalizzato in base alle tue esigenze può richiedere tempo. Tuttavia, esiste già una vasta selezione di fantastici caratteri offerti da Font Awesome e l'elenco viene continuamente ampliato. Sebbene sia un font closed source gratuito, i font approvati progettati dagli utenti vengono aggiunti regolarmente.
Riepilogo generatore di caratteri fantastici
Il generatore di Font Awesome è uno dei migliori font di icone gratuiti attualmente disponibili. Sebbene sia stato progettato per l'uso con Twitter Bootstrap, può essere adattato per l'uso su normali siti Web ed è disponibile anche un plug-in WordPress che offre il meglio di questo carattere di icona. Se usi i caratteri delle icone, prova Font Awesome perché potresti essere piacevolmente sorpreso una volta che lo avrai padroneggiato.
* Il plugin Font Awesome Icons per WordPress è disponibile su https://github.com/rachelbaker/
Vivek Nath.R
Nel mio blog sto usando il plugin per i font di Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Il vantaggio è che ha più opzioni di personalizzazione come cambiare colore, dimensione, orientamento ecc. E ha anche molte altre icone. Controllalo.
Rajesh Namase
Grazie Vivek per aver condiviso questo plugin per WordPress con i nostri lettori.
James Dresen
Ehi Vivek, grazie per aver condiviso il plugin, sto cercando qualcosa del genere. Proverei anche Font Awesome Icons per vedere qual è quello che fa per me. Bell'articolo Rajesh, continua così! Tutto il meglio per te.
Rajesh Namase
Prova anche a utilizzare il plugin Font Awesome per WordPress :)
Andy
Ciao, stavo proprio cercando qualcosa del genere, dato che sono troppo pigro per creare tutte queste classi e aggiungere gli stili e le immagini al tema. Grazie!!
Vipin
Grazie sia a Vivek che a Rajesh, entrambi hanno fornito le informazioni che stavo cercando.
rohit chougale
ciao rajesh
'dimmi possiamo riprodurre video in php online se sì, allora dimmi come..
Rajesh Namase
Puoi provare a utilizzare i tag video HTML 5 :) Ed è facile usare HTML 5 con PHP :)
Vaibhav
Aggiungo in modo difensivo questo plugin al mio acc..
grazie amministratore..!
An e Hittinali
beh, non sono un uomo di molte parole, quindi questo plugin mi è davvero d'aiuto. grazie per aver condiviso questo plugin.
Giglio
C'è un plugin per questa roba? Wow fantastico la prima volta che l'ho sentito. Grazie per aver condiviso questo.
Mohsin ali
Plugin molto interessante Rajesh da dove hai preso queste idee uniche.
David Croft
Ciao,
grazie per questo bel blog, perché questo argomento "Icon Fonts" è molto nuovo per me, quindi posso conoscere molte cose nuove e nuove parole all'interno del tuo blog.
Il generatore di font è davvero il miglior font di icone gratuito attualmente disponibile. quindi è molto utile.
David Johnson
Cordiali saluti, hai usato il termine "generatore di caratteri fantastici" ma il tuo articolo copre lo stesso carattere fantastico, non un generatore. La parola "generatore" ha un significato specifico nel contesto dei caratteri delle icone. Esempi di generatori di caratteri icona che supportano Font Awesome includono icnfnt e Fontello.
Rajesh Namase
Ok, abbiamo aggiornato il titolo dell'articolo, grazie.
Carlton
Hai tralasciato uno svantaggio significativo dei caratteri delle icone: non si degradano con grazia. Tutti gli utenti che hanno disabilitato il download dei caratteri (perché sono attenti alla sicurezza, erano attenti alla sicurezza e dimenticati o sono stati configurati da qualcun altro che era attento alla sicurezza e non ne è a conoscenza) vedono solo brutti simboli glifi vuoti. Per essere un utente responsabile dei font di icone, devi accettare di gettare quegli utenti sotto un autobus.
Ayush Agrawal
Questo articolo sembra un po' vecchio, ma vorrei dire che un buon modo per usare font awesome è usare il suo cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Aiuta i blogger che cercano di ridurre i tempi di caricamento.
Vikas
Bel post, Font Awesome è uno dei migliori sviluppi nel mondo del design.
Mark Fox
Grazie per la condivisione. Sono più propenso a usarlo ora.
Gaurav Dutt
Uomo! 2013, come ho potuto non averlo visto prima, ma ha comunque funzionato perfettamente per me. Grazie per questo.