Dashicons e Font Awesome sono due set di icone che in termini generali vengono definiti Icon Font.
Gli Icon Font sono font che, invece di essere composti da caratteri testuali, contengono simboli e glifi. In pratica, sono icone che possono essere inserite all’interno dei contenuti come se fossero dei normali web font.
Il vantaggio nell’ambito del web design è che permettono di inserire icone ed elementi grafici che caricano velocemente se utilizzati correttamente, e sono perfettamente scalabili e reattivi al variare delle dimensioni delle schermo. Gli icon font, essendo trattati dal browser come semplice testo, possono essere presentati a video attraverso le proprietà dei fogli di stile.
Uno dei pochi limiti degli icon font è che, essendo trattati come caratteri testuali, possono avere un unico colore. Un altro limite è che le dimensioni del font possono crescere rapidamente con l’aumentare del numero dei caratteri disponibili. Per questo, quando si sceglie un icon font da incorporare nelle proprie pagine, è indispensabile prestare attenzione non solo all’aspetto grafico, ma anche alle dimensioni del font stesso.
Altro aspetto strettamente collegato alle prestazioni riguarda l’host del font. Spesso i font sono ospitati sul CDN del proprietario. In questo caso, un rallentamento del CDN, o l’indisponibilità momentanea del servizio, potrebbe generare effetti indesiderati sul proprio sito.
Sono molti gli icon font in circolazione, ma tra gli utenti di WordPress due in particolare meritano un’analisi: Dashicons e Font Awesome.
Dashicons è il set predefinito di icone di WordPress. Le icone che vedete nella bacheca di WordPress provengono proprio da Dashicons.
Aggiungere Dashicons al front-end di WordPress
Il set di Dashicons è disponibile solo nel pannello di amministrazione di WordPress e, se provassimo a inserire le icone nelle pagine frontali del sito, vedremmo solo uno spazio vuoto. Per aggiungere le Dashicons nei contenuti visibili ai visitatori del sito, è necessario includere il foglio di stile e possiamo farlo crendo un piccolo plugin custom.
Create, dunque, un nuovo file .php assegnandogli il nome che preferite e salvatelo nella cartella /wp-content/plugins. Aprite il file e aggiungete questo codice:
<?php
/**
* @package mioplugin
* @version 1.0
*
* Plugin Name: Mio Plugin
* Plugin URI: https://example.com/
* Description: This is a development plugin
* Author: Carlo Daniele
* Version: 1.0
* Author URI: https://example.com/
*/
/*******************************************************/
// Add Dashicons to WordPress Front-end
/*******************************************************/
if( ! is_admin() ){
function mioplugin_load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'mioplugin_load_dashicons_front_end' );
}Quello che fa questo plugin è semplicemente accodare il file /wp-includes/css/dashicons.min.css ai fogli di stile delle pagine del front-end. I font sono invece disponibili nella cartella /wp-includes/fonts.
Attivate il plugin e cominciate ad aggiungere subito le vostre icone ai contenuti delle pagine inserendo un elemento span:
Per individuare i nomi delle classi corrispondenti alle singole icone, potete far riferimento alla pagina ufficiale del font su WordPress.org.
<span class="dashicons dashicons-wordpress-alt"></span>Un esempio è il menu della nostra guida di WordPress:
Purtroppo il set di Dashicons è abbastanza limitato. Ci sono degli icon font che dispongono di centinaia (anche migliaia) di icone, e possiamo utilizzarli gratuitamente.
Tra gli icon font più popolari, ricordo i seguenti:
La procedura di inserimento degli agli icon font è abbastanza simile per tutti i font. In ogni caso, nella documentazione online dei singoli font sono disponibili tutte le informazioni necessarie ad inserirli nelle pagine web di qualsiasi sito.
Aggiungere Font Awesome in WordPress
Font Awesome è un set di icone che viene distribuito in versione gratuita (con un numero limitato di icone) e una versione pro. Il modo più semplice di aggiungere Font Awesome a WordPress è ricorrendo al plugin gratuito Font Awesome, distribuito sia in versione free (1557 icone) che in versione pro (6165 icone).
Una volta installato e attivato il plugin, basterà aggiungere il seguente codice per avere l’icona desiderata:
<i class="fas fa-truck-monster"></i>In alternativa, si potrà utilizzare lo shortcode:
[icon name="truck-monster"]Di default viene assegnato il prefisso fas. Se si desidera assegnare il prefisso fal (stessa icona in stile Light, disponibile nella versione Pro del font), si aggiungerà l’attributo prefix:
[icon name="truck-monster" prefix="fal"]Per ogni altra informazione, si seguano le indicazioni della pagina del plugin.
E se invece si preferisse inserire le icone con il proprio codice?
Nel sito ufficiale di Font Awesome si avverte:
… nella nostra esperienza di lavoro con i clienti che utilizzano WordPress, il problema più impegnativo è quello di affrontare i conflitti generati da temi e plugin che cercano di caricare le proprie versioni di Font Awesome. Le nostre icone sono così popolari nell’ecosistema di WordPress, che vediamo questo problema di conflitti apparire abbastanza spesso.
Quindi:
L’approccio del plugin gestisce molto per voi senza che dobbiate toccare il codice PHP; l’approccio della personalizzazione richiede uno sforzo manuale maggiore da parte vostra, al contempo riducendo al minimo la quantità di codice PHP da modificare.
I creatori del font consigliano di utilizzare il plugin ufficiale se non si ha dimestichezza di programmazione e non si sa come apportare modifiche al codice di WordPress. Inoltre, il plugin risolve automaticamente la maggior parte dei possibili conflitti software.
Nel caso in cui si preferisse far da sé, e si è abbastanza certi che non vi siano conflitti con temi o plugin presenti nel sito, allora si può procedere anche con il metodo custom.
Il metodo custom può essere implementato in diversi modi:
- Ospitando autonomamente Font Awesome
- Ospitando Font Awesome su un CDN
- Utilizzando un Kit di Font Awesome
- Utilizzando gli SVG su CDN
Il metodo consigliato ufficialmente è quello che fa ricorso ai cosiddetti Kit. Per utilizzare un Kit, bisognerà seguire questi passaggi:
- Inserire un file .js nell’
headdelle pagine in cui saranno utilizzate le icone. In WordPress questo significa accodare lo script con le funzioni native di WordPress. Il codice è disponibile qui. - Individuare l’icona giusta nella galleria di Font Awesome
- Inserire l’icona nel contenuto della pagina attraverso un tag
iospanin questo modo:<i class="fas fa-camera"></i> <i class="fab fa-font-awesome"></i>
Tutto qui. Ora scegliete le icone e inseritele in WordPress.
Photo by Skitterphoto from Pexels
Lascia un commento