IcoMoon è una soluzione di icone che offre tre servizi principali:
- Vector Icon Pack
- IcoMoon App
- Generazione di icone in SVG
IcoMoon, al pari di altri set di icone quali potrebbero essere quelle di Font Awesome, vengono richiamate nelle pagine HTML attraverso codice CSS.
Nel presente articolo verrà spiegato come fare per importare ed utilizzare i Font IcoMoon.
Il sito del produttore IcoMoon mette a disposizione diversi pacchetti di icone, molte delle quali a pagamento e tra queste un Free Plan, piano free, che fa al caso nostro.
Le icone free sono quasi 400 e contengono la maggior parte di icone che potrebbero essere inserite in una pagina web e/o in un sito completo.
Importare IcoMoon Font in una pagina web
Una volta entrati nella home page del sito IcoMoon, nella parte alta a destra è presentre un pulsante sul quale c'è la scritta: IcoMoon App. Si faccia click su di esso e la pagina successiva, dal titolo IcoMoon Free, mostrerà le icone a disposizione.
Poniamo il caso che si voglia importare nel proprio sito una o più icone. Basta selezionarne una, o più di una, per vedere il contatore aggiornato, nella parte centrale inferiore, in cui è scritto Selection (n), dove n sta per il numero di icone scelte.
Per l'articolo in oggetto è stata selezionata la prima in alto a sinistra: Home.
Sempre nella parte inferiore della pagina, sul lato destro, è presente il pulsante Generate Font. Si faccia click su di esso.
Premendo il link in rosso Enable Quick Usage, immediatamente avremo accanto al titolo Quick Usage and Sharing, la scritta Ready, preceduta da una spunta di colore verde.
Verrà generato un link al file CSS per utilizzare IcoMoon Font.
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/a25de3d888/UntitledProject/style.css">
Si faccia attenzione a quanto scritto sotto il suddetto link al file CSS:
This link expires in 24 hours. To get permanent unchanging links, Go Premium.
Questo collegamento scade tra 24 ore. Per ottenere collegamenti permanenti, abbonarsi al piano Premium.
Significa che se includessimo il link al file CSS nella header delle pagine web, dopo 24 ore non vedremo più le icone nel nostro sito.
E' un "invito" ad abbonarsi con costi, a dire il vero, non esorbitanti.
Lasciamo stare questo tipo di abbonamento e portiamoci ancora una volta nella parte inferiore destra della pagina, dove è scritto: Download.
Sul desktop verrà scaricata una cartella compressa "icomoon.zip".
Una volta scompattata la suddetta cartella, ne troveremo altre due più una serie di files. A noi interessano solo due elementi:
- la cartella fonts
- il codice CSS contenuto nel file style.css che va copiato nel nostro foglio di stile
Per quanto riguarda il punto due appena scritto, si faccia attenzione al percorso per "raggiungere" i font contenuti nella cartella "fonts", pena la mancata visualizzazione delle icone IcoMoon.
Per vedere se tutto quanto fatto fino ad ora è andato a buon fine, si provi a scrivere il seguente codice HTML:
<span class="icon-home"></span>
Dovremmo vedere l'icona della home.
Se volessimo visualizzare altre icone non si deve fare altro che ripetere il passaggio più su descritto per l'esempio della singola icona icon-home.
Visualizzare i Font IcoMoon in un sito Joomla!
Dalla versione 3.0 di Joomla!, il CMS supporta di default i Font IcoMoon. Questi fonts sono disponibili di default nel template Protostar (frontend), Isis ed Hator (amministrazione).
Richiamare Font IcoMoon nel template di Joomla!
Il file CSS contenente le dichiarazioni per visualizzare i Font IcoMoon, si trova al seguente percorso:
/media/jui/css/icomoon.css
Nella parte superiore del file index.php del template, aggiungegere il codice php:
$doc = JFactory::getDocument(); $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
Prima di verificare se i Font IcoMoon verranno effettivamente visualizzati, serve fare un controllo importante per quanto riguarda l'editor di Joomla!: TinyMCE.
Sarà capitato, qualche volta, che se è stato inserito codice HTML nell'editor, dopo che l'articolo è stato salvato, lo stesso codice non ha prodotto alcun risultato nella da frontend. Questo perchè l'editor non è stato "istruito" nel riconoscere determinati tipi di tag.
Portarsi in Estensioni ⇒ Plugin ⇒ Editor ⇒ TinyMCE
Nel parametro Elementi validi scrivere il valore span[*].
Salvare e chiudere dall'apposito pulsante in alto a sinistra.
Portarsi nell'editor di Joomla! ed inserire un elemento span quale controprova. Ad esempio:
<span class="icon-joomla"></span>
Salvare ed aggiornare il frontend. Se tutto è andato per il verso giusto, dovrebbe esserci il Font IcoMoon di Joomla! nell'articolo.
Un'alternativa a quanto appena descritto circa TinyMCE, potrebbe essere la disabilitazione dell'editor. In questo caso non ci sarebbe alcun problema in merito alla "cancellazione" di elementi HTML dopo aver salvato la scrittura di un testo.
Formattazione delle icone Font IcoMoon
E' possibile, ovviamente, formattare i Font IcoMoon, assegnando una dimensione, un colore ecc. Per fare questo esistono due possibilità:
- Assegnando una classe CSS specifica
- Formattazione inline
Riprendiamo l'esempio dell'icona di Joomla!. Abbiamo scritto:
<span class="icon-joomla"></span>
Se si desidera che tale Font IcoMoon debba essere visualizzato in dimensioni e colori diversi, si potrebbero creare due classi apposite:
- .medium
- .large
La classe .medium avrebbe la seguente formattazione:
.medium {
color: red;
font-size:30px;
}
La classe .large avrebbe la seguente formattazione:
.large {
color: green;
font-size:60px;
}
Quando si andrà a scrivere il tag HTML relativo al Font IcoMoon, esso cambierà in:
<span class="icon-joomla medium"></span>
oppure
<span class="icon-joomla large"></span>
Altra possibilità, come scritto più su, la formattazione inline:
<span class="icon-joomla" style="font-size:40px; color:yellow;"></span>
Conclusioni
Personalmente ritengo Font IcoMoon una valida alternativa ad altri set di font in circolazione, tantissimi a dire il vero. Come si è potuto vedere nell'articolo, i Font IcoMoon possono essere tranquillamente utilizzati a proprio piacimento. C'è solo da "divertirsi" a scegliere, formattare ed inserire tutti i Font di cui si necessita.