Icone Font Awesome e WebSite X5

Abbiamo più volte utilizzato le icone Font Awesome nei template da noi adattati per WebSite X5. Oggi vedremo come si integrano queste icone in un progetto.

Per prima cosa scarichiamo dal sito ufficiale il pacchetto .zip che contiene tutti i file necessari e scompattiamolo in una cartella del nostro PC.

A questo punto possiamo seguire due strade: trattare il font scaricato come un qualsiasi Web Font oppure integrarlo con codice a parte.

Nel primo caso dobbiamo seguire le istruzioni della guida del programma per integrare un Web Font; quindi, per scegliere le icone abbiamo due possibilità:

• nella pagina Cheatsheet selezioniamo con il mouse l'icona che ci interessa e copiamola negli appunti (Ctrl+C); a questo punto basterà incollarla (Ctrl+V) nell'oggetto in cui vogliamo inserirla. Nel punto di inserimento vedremo un puntino, ma visualizzando l'anteprima vedremo correttamente l'icona;
• in alternativa installiamo il file .ttf nel Sistema Operativo e richiamiamo la "Mappa dei caratteri" per scegliere l'icona desiderata. Per maggiori dettagli sull'uso di questo metodo rimandiamo a questo articolo.

A nostro parere questa via, che non prevede l'inserimento di codici extra, presenta dei limiti: per esempio, l'eventuale testo affiancato all'icona, ad eccezione di quello inserito nell'Oggetto Testo, non potrà avere un font diverso dal Font Awesome stesso.


Passiamo ora al secondo metodo, quello che abbiamo utilizzato nella nostra DEMO.

In Impostazioni Avanzate, Statistiche SEO e Codice, Esperto alleghiamo al progetto i file necessari:

• il file font-awesome.min.css indicando la cartella css come Percorso relativo sul server e spuntando la casella Collega il file
• tutti i font presenti nella cartella Fonts del file scompattato, indicando la cartella fonts come Percorso relativo sul server

Il modo più semplice per utilizzare, con questo metodo, le icone nel nostro progetto è inserire il codice HTML necessario dove il programma lo consente, ad esempio in un Oggetto Codice HTML o in un Oggetto Testo dopo aver abilitato il Codice HTML cliccando sul relativo pulsante della barra degli strumenti. La sintassi da usare è la seguente:

<i class="fa fa-comments-o" aria-hidden="true"></i>

Le classi dell'elemento <i> identificano l'icona da visualizzare. Nella pagina Icons sono presenti tutte le icone disponibili e il relativo codice da utilizzare.
L'attributo aria-hidden con valore true serve per specificare che l'icona è un puro elemento decorativo, cioè non rappresenta un contenuto del sito, ma solo una rappresentazione grafica di un contenuto già presente. Questo è utile per favorire l'accessibilità del sito: in questo modo, infatti, ci si assicura che il carattere che rappresenta l'icona non venga letto dagli utenti che navigano con tecnologia assistita.
L'uso del codice in un Oggetto Testo consente anche di formattare facilmente l'icona: selezionando il codice ed utilizzando la barra degli strumenti possiamo agevolmente impostarne il colore e la grandezza. Ma attenzione: è importante non andare a capo nella scrittura del codice HTML, onde evitare l'inserimento di tag indesiderati da parte dell'editor dell'Oggetto Testo.

E' possibile anche inserire delle classi opzionali:

• fa-2x, fa-3x ... per visualizzare le icone ingrandite il doppio, triplo, ecc  rispetto alla grandezza del font impostata
• fa-pull-left, fa-pull-right per allineare a sinistra o a destra l'icona rispetto ad un blocco di testo

Altre possibili opzioni sono presenti nella pagina Examples del sito ufficiale.

Anche con questo metodo possiamo inserire le nostre icone in oggetti del programma in cui non è possibile scrivere codice HTML come, ad esempio, le etichette dell'Oggetto Modulo Invio E-mail.
Basterà individuare l'elemento su cui vogliamo agire ed utilizzarlo come selettore di una regola CSS che, grazie agli pseudo-elementi ::after e ::before, aggiunge un testo (nel nostro caso un'icona) prima o dopo l'elemento selezionato.

Questa è la regola CSS generica, da inserire in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD:

<style>
/* inserisce il contenuto prima dell'elemento selezionato */

selettore::before {
  content: '\f2c0  '; /* carattere Unicode che corrisponde all'icona */
  font-family: 'FontAwesome';
}


/* inserisce il contenuto dopo l'elemento selezionato */

selettore::after {
  content: '\f2c0  '; /* carattere Unicode che corrisponde all'icona */
  font-family: 'FontAwesome';
}
</style>

Dato che la proprietà content non può avere come valore un codice HTML, poiché viene letto come stringa e non interpretato, non possiamo inserire il tag <i> con le relative classi. Possiamo però inserire il carattere, che corrisponde all'icona scelta, in formato Unicode preceduto da una barra retroversa (backslash); possiamo trovare questo valore sempre nella pagina Icons, cliccando sull'icona scelta:

A questo punto non resta che dare spazio alla fantasia...