Aggiungere icone ai moduli di WordPress

Volete aggiungere delle icone ai vostri moduli? Le icone possono essere un ottimo modo per rafforzare visivamente lo scopo di un campo e possono aiutare i vostri moduli ad avere un aspetto più personalizzato.

Questo tutorial spiega come aggiungere le icone di Font Awesome ai vostri moduli.

---

Aggiunta di Font Awesome al sito

Il primo passo è aggiungere la libreria di icone di Font Awesome al vostro sito. Font Awesome è un'ottima opzione per aggiungere icone ai vostri moduli, perché le sue icone agiscono come un font e adotteranno lo stesso colore e le stesse dimensioni degli altri font presenti sul vostro sito.

Ci sono molti modi per aggiungere la libreria di icone Font Awesome al vostro sito, dall'aggiunta di codice all'intestazione del sito all'installazione di un plugin. Per maggiori dettagli su ciascuna opzione, consultate la guida di WPBeginner sull'aggiunta di font di icone a WordPress.

Per mantenere le cose semplici, utilizzeremo il plugin Better Font Awesome. Si tratta di un plugin gratuito per WordPress che aggiunge al vostro sito le risorse necessarie per utilizzare le icone Font Awesome.

Quando siete pronti, procedete all'installazione del plugin. Una volta attivato, si può passare alla fase successiva del tutorial.

Scegliere un'icona da Font Awesome

Una volta ottenuta la possibilità di utilizzare Font Awesome sul vostro sito, potete iniziare a cercare le icone che desiderate utilizzare nei vostri moduli.

Nella pagina dell'icona che si desidera utilizzare, cercare il valore unicode visualizzato appena sotto il nome dell'icona.

Nell'immagine qui sopra, il codice unicode è f1d8.

Prendete nota dell'unicode di ogni icona che desiderate usare nei vostri moduli, perché dovrete includerla nei vostri snippet CSS personalizzati più avanti in questo tutorial.

Aggiunta di icone ai moduli

Esistono diversi modi per incorporare le icone nei moduli. Di seguito sono riportati alcuni esempi, ma ci sono alcune cose da notare prima di immergersi in essi.

Innanzitutto, quasi tutti gli esempi riportati di seguito richiedono l'aggiunta di CSS personalizzati al vostro sito WordPress. Per maggiori dettagli su come farlo, consultate la guida passo-passo di WPBeginner sull'aggiunta di CSS personalizzati al vostro sito.

Inoltre, la famiglia di caratteri da utilizzare negli snippet CSS dipende dall'utilizzo di un'icona gratuita o a pagamento di Font Awesome.

Visualizzazione delle icone davanti ai titoli dei moduli

Per aggiungere un'icona davanti al titolo del vostro modulo, dovete creare un CSS personalizzato che inserisca l'icona per voi. Questo CSS sarà leggermente diverso a seconda che si voglia far apparire l'icona davanti ai titoli di tutti i WPForm del sito o solo di un modulo specifico.

Aggiunta di un'icona a tutti i titoli dei moduli

Il CSS per visualizzare un'icona davanti a tutti i titoli dei moduli è semplice perché è più generale. Ecco lo snippet CSS di cui si ha bisogno:

.wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

In questo snippet ci sono alcune righe che è necessario personalizzare. Innanzitutto, si noti che l'unicode di Font Awesome per l'icona che abbiamo scelto è incluso dopo content:.

È possibile sostituire questo valore con l'unicode di qualsiasi altra icona presente nella libreria di Font Awesome.

Questo CSS include anche un margine destro di 10 pixel. Senza questo margine, non ci sarebbe spazio tra l'icona e il titolo del modulo. È possibile personalizzare questo numero in base alle dimensioni desiderate.

Nel frontend, questo esempio si presenta come segue:

Aggiunta di un'icona al titolo di un modulo specifico

Invece di aggiungere la stessa icona ai titoli di tutti i moduli del sito, è possibile utilizzare un CSS più specifico per indirizzare un singolo modulo.

Per farlo, occorre trovare il numero ID univoco del modulo al cui titolo si vuole aggiungere un'icona.

L'ID di un modulo si trova nel suo shortcode, che si può visualizzare andando su WPForms " Tutti i moduli e cercando nella colonna Shortcode.

Utilizzeremo il numero ID 30 per rendere il nostro CSS più specifico. Ecco il CSS che aggiungerà un'icona solo davanti al titolo del modulo identificato:

#wpforms-30 .wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

Questo CSS è quasi identico allo snippet che aggiungerà icone a tutti i titoli dei moduli del vostro sito. L'unica differenza è che abbiamo aggiunto #wpforms-form-30, in modo che ora questo stile si applichi solo a questo modulo.

Per il proprio modulo, è sufficiente modificare il numero ID del modulo e sostituire l'unicode dell'icona che si desidera inserire, come descritto nella sezione precedente.

Visualizzazione delle icone davanti alle etichette di campo

È possibile aggiungere un'icona davanti a ciascuna etichetta di campo nei moduli, utilizzando uno snippet CSS personalizzabile. Il codice da aggiungere cambierà leggermente a seconda che si voglia utilizzare un'icona per tutte le etichette di campo del sito o che si voglia visualizzare un'icona davanti a un'etichetta di campo specifica.

Aggiunta di un'icona a tutte le etichette dei campi

La visualizzazione di un'icona davanti a tutte le etichette dei campi del sito richiede uno snippet CSS molto simile a quello descritto sopra per i titoli dei moduli:

.wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Assicurarsi di sostituire l'unicode nello snippet qui sopra con quello dell'icona che si desidera utilizzare. È inoltre possibile regolare la dimensione dei margini in base alle proprie preferenze.

Nel frontend, le icone delle etichette dei campi dovrebbero avere un aspetto simile a questo:

Aggiunta di un'icona all'etichetta di un campo specifico

Non è detto che si voglia far apparire la stessa icona accanto a ogni campo. Per puntare solo a un singolo campo, lo snippet CSS deve essere reso più specifico, includendo l'ID univoco del campo alla cui etichetta si vuole aggiungere l'icona.

Questo approccio è molto simile al puntamento del titolo di un singolo modulo, come descritto in precedenza.

Per trovare l'ID del campo da usare nello snippet, aprire il modulo nel frontend, su una pagina pubblicata o usando l'anteprima del modulo. Quindi, fare clic con il tasto destro del mouse sul campo che si desidera utilizzare e scegliere Ispeziona.

Lo schermo dovrebbe dividersi per mostrare il codice sorgente della pagina. Assicurarsi che l'intero campo che si desidera selezionare sia evidenziato (compresa l'etichetta e la casella di input), quindi cercare l'ID.

Per il campo nell'immagine qui sopra, l'ID è wpforms-9-field_0-container.

Ecco lo snippet CSS per aggiungere un'icona all'etichetta di un campo specifico:

.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Se si controlla la prima riga di questo snippet CSS, si noterà che abbiamo aggiunto un elemento #seguito dall'ID appena trovato. Ora la nostra icona sarà aggiunta solo a questo singolo campo, senza alterare le etichette degli altri campi (in questo o in qualsiasi altro modulo).

Mostrare le icone nei campi di input

Invece di aggiungere un'icona all'etichetta di un campo, è possibile visualizzarla all'interno del campo stesso. Lo snippet di codice da usare per farlo è un po' diverso dagli altri di questo tutorial, ma utilizza molti degli stessi elementi:

#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
	position: relative;
}

#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
	padding-left: 35px !important;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label {
	position: relative;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
	position: absolute;
	left: 10px;
	top: 32px;
	z-index: 99999;
	color: #757575;
	font-size: 17px;
	opacity: 0.3;
}

#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
	font-family: "Font Awesome 5 Free";
}

#wpforms-9-field_0-container .wpforms-field-label:before {
	content: '\f007';
}

#wpforms-9-field_1-container .wpforms-field-label:before {
	content: '\f0e0';
}

#wpforms-9-field_2-container .wpforms-field-label:before {
	content: '\f086';
}

Le parti di questo snippet da personalizzare sono le seguenti:

• Cambiare il numero in #wpforms-form-9 all'ID del modulo a cui si vogliono aggiungere le icone. Questo ID si trova nello shortcode del modulo, come descritto in precedenza in questa guida.
• Sostituire wpforms-9-field_0-container e gli altri ID di campo dello snippet precedente con gli ID di campo del proprio modulo. È necessario utilizzare l'ID di campo completo, come descritto nella sezione sezione precedente di questo articolo.
• Sostituire gli unicode nello snippet precedente (f007, f0e0, e f086) per gli unicode delle icone di Font Awesome che si desidera utilizzare.

Il nostro snippet di esempio aggiunge icone a tre campi del modulo. È possibile aggiungere icone a più campi ripetendo la riga che recita #wpforms-9-field_0-container .wpforms-field-label:before, e aggiungere gli ID dei propri moduli e campi.

Ripetere quindi l'ultima riga dello snippet, sostituendo l'ID del proprio campo con quello dell'esempio.

È anche possibile rimuovere queste righe per aggiungere icone a un numero minore di campi del modulo.

Infine, se si desidera modificare l'aspetto delle icone, è possibile regolarne il posizionamento, il colore, la dimensione e l'opacità modificando i valori nelle righe seguenti:

posizione: assoluta; 
sinistra: 10px; 
top: 32px; 
z-index: 99999; 
colore: #757575; 
dimensione del carattere: 17px; 
opacità: 0,3;

Nel frontend, il nostro esempio si presenta così:

Visualizzazione delle icone nei campi HTML

L'aggiunta di icone ai campi HTML è l'opzione più semplice e non richiede CSS personalizzati.

È sufficiente aggiungere un semplice shortcode all'interno del campo HTML. A titolo di esempio, ecco lo shortcode necessario per l'icona dell'aeroplano di carta che abbiamo utilizzato per diversi esempi:

[icon name="paper-plane"]

Per modificare questa impostazione per un'icona diversa, è sufficiente copiare il nome dalla pagina dell'icona specifica in Font Awesome. Il nome dell'icona sarà scritto in grande vicino alla parte superiore della pagina.

Quindi sostituire paper-plane nello shortcode precedente con il nome dell'icona che si desidera utilizzare.

Nel frontend, un'icona in un campo HTML potrebbe avere un aspetto simile a questo:

In un campo HTML, si può anche aggiungere del testo o dell'HTML intorno al codice breve dell'icona, se lo si desidera. Per maggiori dettagli, consultare il nostro tutorial completo sul campo HTML.

Aggiunta di icone ai pulsanti di invio

L'ultimo esempio che condivideremo in questa guida è come aggiungere un'icona al pulsante Invia dei vostri moduli.

Ecco lo snippet necessario:

.wpforms-form button[type=submit]:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and button text */
}

Come per gli altri esempi di questo articolo, assicuratevi di sostituire l'unicode con l'icona desiderata e di modificare il margine se lo desiderate.

Nel frontend, l'icona del pulsante di invio avrà un aspetto simile a questo:

Posizionare le icone sul lato destro

Se si desidera posizionare le icone sul lato destro di un elemento, anziché su quello sinistro, si può usare il comando :after al posto di :before. Ad esempio, per posizionare l'icona dell'aeroplano di carta sul lato destro del pulsante di invio, si può utilizzare il seguente frammento di codice:

.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}

Lo snippet di cui sopra posizionerà l'icona a destra del pulsante di invio:

Ecco fatto! Ora potete aggiungere icone a vari elementi dei vostri moduli.

Volete personalizzare l'aspetto dei vostri moduli utilizzando un'immagine di sfondo? Consultate il nostro tutorial su come aggiungere immagini di sfondo ai vostri moduli con i CSS.