Corsi on-line

Icon’s Web design con Font Awesome

Font Awesome è un interessante progetto libero e gratuito a disposizione dei Web designer è di coloro che desiderano sviluppare elaborati tipografici; si tratta sostanzialmente di un set di icone giunto recentemente alla versione 4.2.0 che potranno essere richiamate all’interno di una pagina Web tramite una stringa testuale. Complessivamente la raccolta contiene ad oggi 479 icone, 40 delle quali sono state aggiunte solo di recente a testimonianza del continuo aggiornamento del progetto.

fa

Per utilizzare il package di Font Awesome, chi lo desidera potrà effettuare il download delle icone direttamente dal repository presente sulla piattaforma per il code hosting GitHub, ma si potrà accedere al set anche attraverso due diversi CDN (Content Delivery Network), quello di MaxCDN e quello di Bootstrap, il noto fremowork front-end nato su iniziativa degli sviluppatori di Twittter. Se per esempio si desiderasse utilizzare quest’ultimo, sarà sufficiente effettuare la seguente chiamata all’interno dei tag head:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Fatto questo si potrà scegliere tra varie tipologie di icone dedicate a differenti ambiti di utilizzo come, per esempio, alla realizzazione di interfacce utente per le Web applications, ai diversi formati per i file, al controllo dei parametri nei campi dei form, ai sistemi per i pagamenti online, ai grafici, alle funzionalità degli editor per i testi, alle frecce direzionali, alla riproduzione audio/video, ai brand aziendali e all’ambiente medico.

Come anticipato, richiamare un’icona specifica sarà molto semplice, basterà utilizzare la stringa ad essa associata; tutte le stringhe presentano il suffisso “fa-“, per cui “fa-facebook” permetterà di visualizzare una “f” nello stile del Sito in Blue; “fa-hand-o-left” una mano il cui indice punta verso sinistra, “fa-floppy-o” il classico simbolo per il salvataggio delle modifiche; “fa-euro” il simbolo della divisa in corso nella UE; “fa-music” una nota musicale etc.

La chiamata ad un’icona avverrà attraverso una classe, l’esempio successivo mostra l’utilizzo di un’icona all’interno di un elenco:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
...

Come avvertono gli sviluppatori del progetto, la versione più recente di Font Awesome non offre alcun supporto per Internet Explorer 7, inoltre, le icone relative ai marchi registrati dovranno essere utilizzate nel rispetto delle leggi vigenti sui trademark.

Via Font Awesome

Post correlati
I più letti del mese
Tematiche