Font Awesome è un set di icone vettoriali inserite all'interno di un font. I vantaggi di usare una icona vettoriale all'interno di un font è quello di avere icone di qualità e leggere da scaricare. Font Awesome è stato creato da Dave Gandy, ed il suo set di icone è diventato popolare grazie al fatto che bootstrap ne fa uso al suo interno.
Esistono anche altri icon-font alternativi a Font Awesome come ad esempio icomoon. L'utilizzo di queste icone è semplice, e l'aspetto in termini di grandezza e colore si gestisce esattamente come un carattere qualsiasi, ovvero attraverso le regole font-size e color dei css.
Il set di icone viene rilasciato con un file css dove ci sono scritte una serie di dichiarazioni standard per l'utilizzo dei font in una lista, un menù, farli roteare o semplicemente cambiare l'angolatura e la grandezza.
Il set di icone è formato da oltre 500 elementi e contiene oltre le più usuali icone anche i loghi di marchi come joomla, tweetter, facebook, google ed altri marchi famosi del web e non.
Vediamo alcuni esempi pratici realizzati con Font Awesome:
questo è il codice che farà visualizzare l'icona di una macchina fotografica
<i class="fa fa-camera-retro"></i> fa-camera-retro
fa-camera-retro
Questo è lo stesso codice con in aggiunta la classe fa-5x che ne aumenterà la grandezza di 5 volte
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
fa-5x
Questo è un esempio di codice per impostare alle icone una larghezza fissa. Serve sopratutto in quei casi dove le diverse larghezze delle icone porta ad un dis-allineamento, particolarmente utile negli elenchi Nav e gruppi della lista. La classe usata per l'allineamento è fa-fw.
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Librerie</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applicazioni</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Impostazioni</a> </div>
Vediamo anche un esempio con una lista ordinata che utilizza le classi fa-ul e fa-li
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>
- List icons
- can be used
- as bullets
- in lists
Visualiziamo un ultimo esempio utilizzando le classi fa-spin per fare roteare l'icona e la classe fa-pulse per farla roteare in 8 steps. Le classi lavorano insieme a fa-spinner, fa-refresh, e fa-cog. Aggiungo anche la classe fa-2x per ingrandire un pò le icone.
<i class="fa fa-spinner fa-spin fa-2x"></i> <i class="fa fa-circle-o-notch fa-spin fa-2x"></i> <i class="fa fa-refresh fa-spin fa-2x"></i> <i class="fa fa-cog fa-spin fa-2x"></i> <i class="fa fa-spinner fa-pulse fa-2x"></i>
Vediamo adesso come integrare la libreria Font-Awesome in joomla
Dopo aver scaricato il pacchetto dal sito di font-awesome, decompattatelo; troverete una serie di cartelle, fra cui css e fonts, queste le uniche cartelle che ci serviranno. Trasferite la cartella fonts all'interno della cartella del vostro template, in pratica la cartella che contiene anche le cartelle css, images e html. La cartella fonts è quella che contiene il set di icone nei fari formati; otf, eot, svg, ttf, woff e woff2. Prendete adesso il file font-awesome.css che è dentro la cartella css del pacchetto font awesome e trasferitelo nella cartella css del vostro template.
Inseriamo adesso le istruzioni nel template per fare in modo che la libreria di font awesome si integri:
Apriamo ed editiamo il file templateDetails.xml che si trova nella cartella del vostro template ed aggiungete la seguente stringa
<folder>fonts</folder>
fra i tag <files> </files>. Questa istruzione farà in modo che se esportate il template oppure lo duplicate, verra presa in considerazione anche la nuova cartella. Salvate e chiudete il file templateDetails.xml (ed eventualmente ri-trasferitelo sul server).
Come ultima operazione non rimane altro che inserire la stringa che richiama il file css di font-awesome "font-awesome.css" dentro il file index.php.
Aprite ed editate il file index.php del vostro template ed inserite questa stringa fra i tag <head> </head>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/font-awesome.css" type="text/css" />
Inserendo questa stringa il template "saprà" che eventuali chiamate all'interno del sito a riferimenti di font-awesome faranno riferimento al percorso-file in questione.
N.B. È possibile che alcuni template di alcuni framework, il file index.php non abbia i tag <head>, quindi dovrete rifarvi alla documentazione del template che usate per inserirvi la stringa. In alternativa è possibile inserire nel file css del template l'istruzione per importare un file css esterno:
@import url("http://www.nomedomain.com/templates/tuo_template/css/font-awesome.css");
Non usate le due tecniche insieme.
Adesso che Font Awesome è integrato in joomla possiamo personalizzare il nostro template aggiungendo le icone che più ci piacciono.
Ad esempio se vogliamo avere un icona per ogni voce del menù orizzontale, sarà sufficiente ricavare l'ID dell'item e creare una regola css così scritta:
/* Icona per menù home su item 101 con allineamento a sinistra */
.item-101 a:before {
display: inline-block;
font-family: fontawesome;
content: "\f015";
width: 20px;
}
Se invece volessimo un allineamento a destra di questa icona useremmo questo codice
/* Icona per menù home su item 101 con allineamento a destra */
.item-101 a:after {
display: inline-block;
font-family: fontawesome;
content: "\f015";
padding-left: 10px;
}
Se invece volessimo sostituire le icone grafiche del modulo di contatto per migliorarne l'aspetto, sarà sufficiente aggiungere al nostro file css questo codice
* --------------------------
Icone per il form di contatto di joomla
---------------------------*/
/* Nome */
#jform_contact_name-lbl:before {
display: inline-block;
font-family: fontawesome;
content: "\f007";
width: 20px;
color: #0088cc;
vertical-align: text-top;
}
/* E-mail */
#jform_contact_email-lbl:before {
display: inline-block;
font-family: fontawesome;
content: "\f0e0";
width: 20px;
color: #0088cc;
vertical-align: text-top;
}
/* Oggetto*/
#jform_contact_emailmsg-lbl:before {
display: inline-block;
font-family: fontawesome;
content: "\f02b";
width: 20px;
color: #0088cc;
vertical-align: text-top;
}
/* Messaggio */
#jform_contact_message-lbl:before {
display: inline-block;
font-family: fontawesome;
content: "\f14b";
width: 20px;
color: #0088cc;
vertical-align: text-top;
}
/* E-mail in copia */
#jform_contact_email_copy-lbl:before {
display: inline-block;
font-family: fontawesome;
content: "\f0e0";
width: 20px;
color: #0088cc;
vertical-align: text-top;
}
/* pulsante invio */
#contact-form .btn:before {
display: inline-block;
font-family: fontawesome;
content: "\f064";
width: 20px;
text-align: left;
}
Con font awesome integrato in joomla possiamo inserire in ogni dove una delle oltre 500 icone a disposizione, ed io ho inserito una di queste, la tazzina di caffè, dentro il mio tasto "offrimi un caffè" semplicemente aggiungendo alla classe del pulsante la classe fa-coffee.
Questo guida termina qui, se avete qualche dubbio postate nei commenti, cercherò di rispondervi.
Se la guida vi è piaciuta e sopratutto vi è stata di utilità, potete ringraziarmi offrendomi un caffè o semplicemente cliccando su qualche banner.