Introduzione
Divi ha creato un modulo per le icone, che va bene per la maggior parte dei casi, ma in altri è abbastanza limitante in quanto non ti permette di aggiungere del testo vicino all’icona.
Con il seguente metodo invece vedremo come posizionare le icone all’interno del testo e personalizzare il loro colore e dimensioni.
Bene, iniziamo!
Elenco completo delle icone
Ogni icona Divi ha un suo codice univoco che andremo a utilizzare per l’icona desiderata.
Ad esempio, il codice per l’icona della casa è: 
Puoi trovare l’elenco completo delle icone corrispondenti qui: https://www.elegantthemes.com/blog/resources/elegant-icon-font (scorri verso la parte centrale della pagina per il set completo di icone).
Inserire l’icona Divi in un editor di testo
Nota: non è necessario scaricare e installare il carattere se si utilizza il tema Divi o Extra. L’Elegant Icon Font è già integrato. Tutto quello che devi fare è aggiungere il seguente codice dove vuoi in un editor di testo usando il seguente formato:
<span class='et-pb-icon'></span>
Dopo aver aggiunto e salvato il codice, esci dall’amministrazione del tuo sito WordPress e ricarica la pagina del modulo sul frontend. Vedrai che nella versione desktop la barra di scorrimento scompare e nella versione mobile non riuscirari più a scorrere orizzontalmente la pagina del tuo sito web.
Personalizzare gli stili dell’icona
Generalmente, gli stili delle icone in Divi possono essere modificati nella scheda Design nelle impostazioni del modulo Divi. Tuttavia, nel caso in cui aggiungi un’icona con il codice CSS e desideri applicare alcuni stili unici dovrai usare invece questa riga:
<span class='et-pb-icon' style='font-size: 24px;'></span>
<span class='et-pb-icon' style='font-size: 33px; color: red;'></span>
Puoi trovare l’elenco completo degli stili di testo CSS disponibili qui:
https://www.w3schools.com/css/css_text.asp
Conclusione
Speriamo che in questa breve guida tu abbia imparato ad aggiungere le icone Divi con il codice CSS. Se hai dubbi o domande, lascia un commento nella sezione qua sotto. Ciao, alla prossima!
0 commenti