Come aggiungere icone nel menu del tuo sito WordPress

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

2K+ Visite sul post corrente.

Come aggiungere icone nel menu WordPress

Per rendere i siti più facilmente navigabili, si è diffuso l’uso delle icone.

Esse, infatti, non sono solamente elementi grafici, come può essere la favicon, ma svolgono l’importante funzione di aiutare l’utente a orientarsi nel sito, poiché vengono interpretate in maniera immediata.

Inoltre, spesso l’icona riesce a comunicare più di una parola.

Per questo può essere molto utile aggiungere icone nel menu del tuo sito WordPress.

Nella guida di oggi, ti suggerisco alcuni strumenti per inserire le icone all’interno del menu e rendere così più semplice la navigazione.

Per maggiori informazioni sulla personalizzazione del menu, e per imparare ad usare tutti gli aspetti e le funzionalità di WordPress, iscriviti al nostro corso WordPress di base.

Aggiungere icone nel menu del tuo sito WordPress con i plugin

Ci sono vari strumenti per inserire icone nel tuo menu WordPress e ora ti presento i migliori plugin gratuiti, semplicissimi da usare.

Aggiungere icone nel menu del tuo sito WordPress con i plugin - Menu Image

Il primo plugin che ti presento si chiama Menu Image e permette non solo di aggiungere un’immagine al menu, ma anche di inserirne una seconda che apparirà muovendo il cursore del mouse sulla prima immagine.

Quando installi il plugin, vai alla voce Menu images per le impostazioni delle tue icone.

Hai la possibilità di inserire 3 diverse dimensioni, che verranno applicate a tre menu.

Naviga adesso in Aspetto > Menu e seleziona la voce di menu a cui desideri aggiungere l’icona.

Comparirà il pulsante Menu image, che apre una finestra per selezionare le icone.

Qui, nella scheda Image and Icon scegli se usare un’icona o un’immagine.

Poi, con Set image selezioni l’immagine principale, mentre con Set image on hover scegli l’immagine da far apparire al passaggio del mouse.

Image icon

Imposta le dimensioni dell’icona, poi decidi come visualizzare il testo: puoi nasconderlo oppure posizionarlo sopra, sotto, prima o dopo l’immagine.

Ci sono altre due schede in questa finestra, Buttons Badges&Bubbles.

Si tratta di funzionalità disponibili nella versione Pro, che ti permettono di creare pulsanti e badge.

Sono molto interessanti, renderanno le tue call to action più efficaci.

Aggiungere icone nel menu del tuo sito WordPress con i plugin - WP Menu Icons

Vediamo ora come aggiungere icone personalizzate nel tuo menu con WP Menu Icons.

Attiva il plugin e vai su Aspetto > Menu e seleziona il tipo di icone che vuoi utilizzare.

Accanto a ciascuna voce di menu comparirà il simbolo “+”.

Cliccaci sopra per scegliere l’icona che desideri e imposta se l’etichetta deve essere nascosta, la posizione dell’icona, le sue dimensioni e il colore.

WP Menu Icons

Salva e testa il tuo menu.

Come vedi, WP Menu Icons è uno strumento veramente immediato e facile da usare, permettendoti di inserire icone personalizzate nel tuo menu.

Inserire icone nel menu con il CSS

Esiste la possibilità di aggiungere icone nel menu WordPress utilizzando semplicemente il CSS, e quindi senza bisogno di installare plugin.

Questa soluzione è un po’ più lunga e complessa, ma ti permetterà di avere il totale controllo sulla personalizzazione del tuo menu e non è difficile se hai conoscenze di base di CSS.

Per prima cosa, carica le icone all’interno della libreria media.

Vai poi nella sezione per inserire CSS personalizzato nel tuo sito web, quindi puoi utilizzare l’area CSS personalizzato del tuo tema o modificare il file style.css (del tema child, mi raccomando!).

Aggiungi infine il tuo codice, utilizzando una classe come questa:

.mia_icona {
background-image: url('http://www.esempio.it/wp-content/uploads/2021/04/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Adesso dovrai aggiungere questa classe al menu.

Vai su Aspetto > Menu e assicurati che in Impostazioni schermata sia attiva la casella CSS Classes.

classi css menu

Questo permetterà di mostrare la voce Classi CSS in ciascuna voce del tuo menu e quindi applicare lo stile da te creato.

Conclusione

Oggi abbiamo visto tre utili soluzioni per aggiungere icone nel menu del tuo sito WordPress.

Se avevi in mente di aggiungere questo dettaglio al tuo sito, non esitare oltre.

Usando questi strumenti si tratterà di un lavoro da pochi minuti.

Potresti poi completare la personalizzazione del tuo menu aggiungendo delle intestazioni non cliccabili: leggi la guida!

Hai mai pensato di aggiungere icone nel menu del tuo sito WordPress?

Avevi già provato questi strumenti?

Parliamone nei commenti!

Guide correlate:

Tags:
Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
31Commenti
Lascia un commento
  1. Immagine avatar per salvatore
    salvatore

    Ciao, complimenti per il sito. Sai indicarmi come posso inserire icone solo per la versione responsive come da foto allegata?
    https://ibb.co/BZCy9Xj

    grazie in anticipo per il tuo aiuto

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Salvatore, potresti dare un’occhiata a WP Responsive Menu, ha tante funzionalità e potresti trovare ciò di cui hai bisogno.

  2. Immagine avatar per Francesco
    Francesco

    Buongiorno! Prima di tutto complimenti per il sito, mi sta tornando molto utile.
    Sto preparando un sito personale in cui voglio far comparire nella barra del menù un’icona con l’immagine del profilo dell’utente che ha effettuato il login sul sito. E’ possibile tramite uno dei plugin qui presentati o devo operare in altra maniera?

    Grazie mille!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Francesco, testa questo plugin https://wordpress.org/plugins/dashboard-user-profile-detais-dupd/ che sembra rispondere correttamente alle tue necessità. Facci sapere se lo utilizzerai!

    2. Immagine avatar per Francesco
      Francesco

      Grazie per la risposta.
      Installato e “provato”, ma in circa un’oretta non sono riuscito a farlo funzionare. In effetti non ho trovato alcun tipo di istruzione su come usarlo, non ci sono indicazione su come settarlo e sono tutti campi che richiedono input da parte dell’utente (me).

      Ma non demordo, continuerò a provare!

  3. Immagine avatar per Nicola
    Nicola

    Buonasera. Complimenti per il blog. Sto realizzando un sito nel quale devo inserire l’opzione per sentire la radio locale. Volevo inserire un icona personalizzata della radio nella sezione menù. E’ possibile fare questo? Serve un plugin apposito? Ti ringrazio.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Nicola, l’icona per rappresentare la radio è già pronta?

    2. Immagine avatar per nicola
      nicola

      si. è già pronta.

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Si, prova ad usare il plugin Menu Image.

  4. Immagine avatar per nicola
    nicola

    ciao stavo seguendo la guida di inserimento dei social nella nav di un sito wordpress e volevo sapere se c’ era la possibilità che al passaggio del layout da desktop a mobile le icone social rimangano al di fuori dell’ hamburger menu

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Nicola, si dovrà fare qualche modifica al CSS: https://sos-wp.it/guida-css/. Leggi al riguardo la nostra guida.

  5. Immagine avatar per ANGELO
    ANGELO

    Buona sera Andrea, premetto che utilizzo avada.
    Ho creato una slide con fusion slider, ma come icona anziché delle classiche frecce mi escono due quadrati. Stesso discorso per l’icona “cerca” anzichè una lente a contatto mi esce un quadratino.
    Come posso risolvere il problema?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Angelo, se il problema si presenta su tutti i browser, dovresti usare uno specifico patch come indicato qui: https://theme-fusion.com/forums/topic/navigation-arrows-on-slider-revolution-not-displaying/

  6. Immagine avatar per Cristian
    Cristian

    Ciao Andrea! A proposito di icone, per il mio sito utilizzo le “fonts awesome”. Il problema è che nella home le vedo correttamente, se invece entro nei vari articoli le icone cambiano. Cosa devo modificare affinchè le icone siano uguali a quelle della home?
    Ti ringrazio per il tuo prezioso aiuto,e ti faccio i complimenti per questo blog fantastico!
    Buona giornata,
    Cristian

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Cristian, che succede nelle altre pagine? Mandaci un’immagine a info@sos-wp.it. Un saluto!

  7. Immagine avatar per Massimiliano
    Massimiliano

    Ciao! Questa guida mi ha quasi salvato la vita! 😀
    HO solo una domanda da farti. Vorrei spostare le mie icone social nella parte destra del menu ma non trovo nemmeno tramite l’ispeziona elemento il modo per farlo.
    Sai per caso come potrei fare?

    Grazie mille e ancora complimenti per il blog 😉

    Massimiliano

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimiliano, quale strumento hai usato per l’ispeziona elemento?

  8. Immagine avatar per Nanà
    Nanà

    Ciao,
    Ho wordpress.com, è possibile mettere un’icona o un’immagine nel menù?
    Grazie mille

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Nanà,
      non è possibile, leggi tutte le differenze e i limiti di wordpress.com rispetto a wordpress.org
      Un saluto!

  9. Immagine avatar per silvia
    silvia

    Ciao Andrea! Ho progettato un sito seguendo sos-wordpress 🙂 tra una settimana lo metterò online e in questo momento sto facendo le icone da mettere sul sito e sostituire a quelle presenti nel tema comprato (su Themeforest). Una volta creare le icone posso istallarle e gestirle con uno di questi plugin? Non capisco se servono per scegliere nuove icone o anche per caricare e gestire quelle fatte da se. Sono una totale neofita e non vorrei toccare il codice del tema per ora, ho il terrore di fare danni. Quale plugin fa al caso mio? grazie mille!!!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Silvia,
      quale tema hai acquistato? Non credo che tu abbia bisogno di alcun plugin, se il tema già prevedeva l’inserimento di icone.
      Ovvero, potrai caricare le tue icone sul server, e fare in modo di collegarle al tema che stai utilizzando, al posto di quelle già presenti.
      Fammi sapere, un saluto!

    2. Immagine avatar per silvia
      silvia

      ho comprato il Delice Plus che, sì, prevedeva già le icone ma non capisco da dove poterle sostituire. Nel mio admin, nelle opzioni del tema, c’è un “import/export” : Import / Export Options – Import Options -Import from file Import from URL
      Import WARNING! This will overwrite all existing option values, please proceed with caution!

      E’ da lì che devo caricare i file? ma come fa a capire dove devono andare i miei file? me lo chiederà dopo?
      Scusa le domande da neofita…!

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Silvia,
      spiega il messaggio che attiverai semplicemente nuove opzioni, rispetto a quelle di default

  10. Immagine avatar per maymonod
    maymonod

    Grazie per la spiegazione ottima, ho una domanda… Tra le icone non ne trovo una di logout, signout, exit… E’ possibile aggiungerla secondo te? Hai idea di come si faccia??

    grazie 🙂

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao,
      certo, puoi aggiungerla.
      Un saluto!

    2. Immagine avatar per maymonod
      maymonod

      Ottimo, e hai anche idea di come si faccia per aggiungerla?

      grazie

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao,
      puoi generarne altre da qui https://fortawesome.github.io/Font-Awesome/, e poi aggiungerle secondo quanto spiegato qui: https://wordpress.org/plugins/menu-social-icons/.

  11. Immagine avatar per walter
    walter

    Scusa rocco, io vorrei inserire un’icona che ho nella libreria posso farlo e come?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Walter,
      che tema utilizzi?
      Un saluto!

  12. Immagine avatar per Elisabetta
    Elisabetta

    Ciao! Innanzitutto complimenti per il blog 🙂 Ne sto giusto giusto progettando uno di moda e vorrei tanto inserire le icone social nel mio menu in alto ma purtroppo una volta installato e attivato il plugin menu social icons andando su link personalizzato le icone non appaiono 🙁 aiutamiii

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Elisabetta, grazie per il commento e complimenti per il tuo nuovo progetto!
      E’ strano che il plugin non funzioni; potrebbe esserci un problema di compatibilità con il template.
      Quale tema stai usando?
      Buona serata,
      Andrea

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *