Aggiunta di icone ai tuoi moduli WordPress

Vuoi aggiungere icone ai tuoi moduli? Le icone possono essere un ottimo modo per rafforzare visivamente lo scopo di un campo e possono aiutare i tuoi moduli ad apparire più personalizzati.

Questo tutorial discuterà come aggiungere icone da Font Awesome ai tuoi moduli.

---

Aggiungere Font Awesome al tuo sito

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

Ci sono molti modi per aggiungere la libreria di icone di Font Awesome al tuo sito, dall'aggiunta di codice all'intestazione del tuo sito all'installazione di un plugin. Per i dettagli su ogni opzione, consulta la guida di WPBeginner per aggiungere font di icone a WordPress.

Per semplicità, useremo il plugin Better Font Awesome. È un plugin gratuito per WordPress che aggiunge le risorse necessarie per utilizzare le icone di Font Awesome sul tuo sito.

Quando sei pronto, procedi e installa il plugin. Puoi passare al passaggio successivo del tutorial non appena viene attivato.

Scegliere un'icona da Font Awesome

Una volta che hai la possibilità di utilizzare Font Awesome sul tuo sito, puoi iniziare a cercare le icone che desideri utilizzare nei tuoi moduli.

Nella pagina dell'icona che desideri utilizzare, cerca il valore unicode visualizzato appena sotto il nome dell'icona.

Nell'immagine sopra, l'unicode è f1d8.

Prendi nota dell'unicode per ogni icona che desideri utilizzare nei tuoi moduli, poiché dovrai includerlo nei tuoi snippet CSS personalizzati più avanti in questo tutorial.

Aggiungere icone ai tuoi moduli

Ci sono diversi modi per incorporare icone nei tuoi moduli. Abbiamo trattato diversi esempi di seguito, ma ci sono alcune cose da notare prima di addentrarti in essi.

Innanzitutto, quasi tutti gli esempi seguenti richiedono l'aggiunta di CSS personalizzato al tuo sito WordPress. Per i dettagli su come farlo, consulta la guida passo passo di WPBeginner per aggiungere CSS personalizzato al tuo sito.

Inoltre, la famiglia di font che devi utilizzare nei tuoi snippet CSS dipende dal fatto che tu utilizzi un'icona gratuita o a pagamento da Font Awesome.

Visualizzazione di icone davanti ai titoli dei moduli

Per aggiungere un'icona davanti al titolo del tuo modulo, devi creare un CSS personalizzato che inserirà l'icona per te. Questo CSS sarà leggermente diverso a seconda che tu voglia che l'icona appaia davanti ai titoli di tutti i WPForms sul tuo sito, o solo di uno 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 avrai 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 */
}

Ci sono alcune righe in questo snippet che dovrai personalizzare. Innanzitutto, nota che l'unicode di Font Awesome per l'icona che abbiamo scelto è incluso dopo content:.

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

Questo CSS include anche un margine destro di 10 pixel. Senza questo, non ci sarebbe spazio tra l'icona e il titolo del modulo. Puoi personalizzare questo numero a qualsiasi dimensione desideri.

Sul frontend, questo esempio appare così:

Aggiunta di un'icona al titolo di un modulo specifico

Invece di aggiungere la stessa icona ai titoli di ogni modulo sul tuo sito, puoi usare un CSS più specifico per indirizzare un singolo modulo.

Per farlo, dovrai trovare il numero ID univoco per il modulo di cui vuoi aggiungere un'icona al titolo.

Puoi trovare un ID modulo nel suo shortcode, che puoi visualizzare andando su WPForms » Tutti i moduli e guardando nella colonna Shortcode.

Useremo 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 esattamente lo stesso dello snippet che aggiungerà icone a tutti i titoli dei moduli sul tuo sito. L'unica differenza è che abbiamo aggiunto #wpforms-form-30, quindi ora questo stile si applicherà solo a questo singolo modulo.

Per il tuo modulo, dovrai solo cambiare il numero ID del modulo e sostituire l'unicode per l'icona che vuoi mostrare, come descritto nella sezione precedente.

Visualizzazione di icone davanti alle etichette dei campi

Puoi aggiungere un'icona davanti a ciascuna delle etichette dei campi nei tuoi moduli utilizzando uno snippet CSS personalizzabile. Il codice che devi aggiungere cambierà leggermente a seconda che tu voglia usare un'icona per tutte le etichette dei campi sul tuo sito, o se vuoi visualizzare un'icona davanti a una specifica etichetta di campo.

Aggiungere un'icona a tutte le etichette dei campi

Visualizzare un'icona davanti a tutte le etichette dei campi sul tuo 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 */
}

Assicurati di sostituire l'unicode nello snippet sopra con quello dell'icona che desideri utilizzare. Puoi anche regolare la dimensione del margine per adattarla alle tue preferenze.

Sul frontend, le icone delle etichette dei tuoi campi dovrebbero apparire più o meno così:

Aggiungere un'icona all'etichetta di un campo specifico

Potresti non volere che la stessa icona appaia accanto a ogni campo. Per selezionare un solo campo, lo snippet CSS deve essere reso più specifico includendo l'ID univoco del campo la cui etichetta desideri aggiungere un'icona.

Questo approccio è molto simile alla selezione del titolo di un singolo modulo come descritto sopra.

Per trovare l'ID del campo che devi usare nello snippet, apri il tuo modulo sul frontend, sia su una pagina pubblicata sia utilizzando l'anteprima del modulo. Quindi fai clic destro sul campo che desideri selezionare e scegli Ispeziona.

Il tuo schermo dovrebbe dividersi per mostrare il codice sorgente della pagina. Assicurati che l'intero campo che desideri selezionare sia evidenziato (incluse l'etichetta e la casella di input), quindi cerca l'ID.

Per il campo nell'immagine 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 controlli la prima riga di questo snippet CSS, noterai che abbiamo aggiunto un #, seguito dall'ID che abbiamo appena trovato. Ora la nostra icona verrà aggiunta solo a questo singolo campo, senza alterare le etichette di altri campi (in questo modulo o in qualsiasi altro modulo).

Mostrare icone nei campi di input

Invece di aggiungere un'icona all'etichetta di un campo, puoi visualizzarla all'interno del campo stesso. Lo snippet di codice che dovrai utilizzare è piuttosto diverso dagli altri in 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 che dovrai personalizzare sono le seguenti:

• Cambia il numero in #wpforms-form-9 con l'ID del modulo a cui desideri aggiungere le tue icone. Puoi trovare questo ID nello shortcode del tuo modulo, come descritto in precedenza in questo tutorial.
• Sostituisci wpforms-9-field_0-container e gli altri ID dei campi nello snippet sopra con gli ID dei campi del tuo modulo. Devi utilizzare l'ID completo del campo come descritto nella sezione precedente di questo articolo.
• Sostituisci gli unicode nello snippet sopra (f007, f0e0 e f086) con gli unicode delle icone Font Awesome che desideri utilizzare.

Il nostro snippet di esempio aggiunge icone a tre campi del nostro modulo. Puoi aggiungere icone a più campi ripetendo la riga che dice #wpforms-9-field_0-container .wpforms-field-label:before, e aggiungendo i tuoi ID di modulo e campo.

Quindi ripeti l'ultima riga dello snippet, sostituendo il tuo ID di campo con quello nell'esempio.

Puoi anche rimuovere queste righe per aggiungere icone a meno campi nel tuo modulo.

Infine, se desideri modificare l'aspetto delle tue icone, puoi regolarne il posizionamento, il colore, le dimensioni e l'opacità modificando i valori nelle seguenti righe:

position: absolute; 
left: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
font-size: 17px; 
opacity: 0.3;

Sul frontend, il nostro esempio appare così:

Visualizzare icone nei campi HTML

Aggiungere icone ai campi HTML è l'opzione più semplice e non richiede CSS personalizzato.

Tutto ciò che ti servirà è aggiungere un semplice shortcode all'interno del campo HTML. Ad esempio, ecco lo shortcode di cui avremmo bisogno per l'icona dell'aeroplanino di carta che abbiamo utilizzato per diversi dei nostri esempi precedenti:

[icon name="paper-plane"]

Per adattare questo per un'icona diversa, dovrai semplicemente copiare il nome dalla pagina dell'icona specifica in Font Awesome. Il nome dell'icona sarà in testo grande vicino alla parte superiore della pagina.

Quindi sostituisci paper-plane nello shortcode sopra con il nome dell'icona che desideri utilizzare.

Sul frontend, un'icona in un campo HTML potrebbe apparire più o meno così:

In un campo HTML, puoi anche aggiungere testo o HTML aggiuntivo attorno allo shortcode dell'icona, se lo desideri. Per maggiori dettagli, consulta il nostro tutorial completo sull'campo HTML.

Aggiungere icone ai pulsanti di invio

L'ultimo esempio che condivideremo in questo tutorial è come aggiungere un'icona al pulsante di invio dei tuoi moduli.

Ecco lo snippet di cui avrai bisogno:

.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 in questo articolo, assicurati di sostituire l'unicode per l'icona desiderata e di modificare il margine se lo desideri.

Sul frontend, l'icona del tuo pulsante di invio apparirà simile a questa:

Posizionare le icone sul lato destro

Se desideri posizionare le icone sul lato destro di un elemento anziché sul sinistro, puoi usare :after al posto di :before. Ad esempio, per posizionare l'icona dell'aeroplanino di carta sul lato destro del pulsante di invio, puoi usare il seguente snippet 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 sopra posizionerà l'icona a destra del tuo pulsante di invio:

Ecco fatto! Ora puoi aggiungere icone a vari elementi nei tuoi moduli.

Desideri personalizzare l'aspetto dei tuoi moduli utilizzando un'immagine di sfondo? Dai un'occhiata al nostro tutorial su come aggiungere immagini di sfondo ai tuoi moduli con CSS.