Guide

Come aggiungere icone nel menu del tuo sito WordPress

Le icone sono uno strumento molto utile per rendere più intuitiva la navigazione all’interno del sito. Infatti, usare elementi grafici aiuta gli utenti a capire in modo immediato il significato delle varie voci del menu. Se l’idea ti piace, continua a leggere la guida.

aggiungere icone nel menu del tuo sito 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.

Infine ricorda che se dovessi avere domande o avere bisogno di un supporto professionale, puoi attivare oggi stesso la nostra Assistenza Prioritaria rapida e gratuita - inclusiva di 32 video del Corso WordPress - quando acquisti uno spazio hosting su SiteGround (o altri hosting) tramite il nostro link. Migliaia di persone si sono già affidate a noi e possiamo aiutare rapidamente anche te.

Qui tutte le testimonianze

Aggiungere icone nel menu del tuo sito WordPress con i plugin

Menu Icons

Il primo plugin di cui parleremo si chiama Menu Icons. Questo è uno strumento molto utilizzato; ad oggi conta oltre 100 mila download.

Al momento, risulta già aggiornato e compatibile con la versione 4.9 di WordPress. In ogni caso, è sempre consigliabile effettuare un backup di tutto il sito prima di installare nuovi plugin.

Una volta installato, Menu Icons è molto semplice da usare: naviga all’interno di Aspetto > Menu, per aprire la schermata di configurazione dei menu di navigazione.

Per ogni voce che hai aggiunto al menu, vedrai un link chiamato “Icon: Select”. Cliccaci sopra e seleziona l’icona che vuoi associare a quella particolare voce.

Aggiungere icone nel menu del tuo sito WordPress con Menu Icons

Sulla destra, troverai anche alcune opzioni aggiuntive:

aggiungere icone nel menu del tuo sito WordPress con Menu Icons

  • Hide Label: yes/no; per nascondere il testo e visualizzare nel menu solo l’icona;
  • Position: before/after; per visualizzare l’icona prima o dopo della voce nel menu;
  • Vertical Align; per determinare l’allineamento verticale dell’icona (cioè, se allinearla al testo, oppure posizionarla più in alto o più in basso).
  • Size; per determinare quanto grande deve essere l’icona.

Quando hai impostato tutte le opzioni, clicca Select e l’icona apparirà nel tuo menu.

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

Assistenza WordPress rapida e veloce con SOS WP

Menu Image

Il plugin Menu Image permette non solo di aggiungere un’immagine al menu, ma anche di aggiungerne una seconda che apparirà muovendo il cursore del mouse sulla prima immagine.

Anche in questo caso, naviga in Aspetto > Menu e seleziona la voce di menu a cui desideri aggiungere l’icona. Dal pulsante Set image selezioni l’immagine principale, mentre con Set image on hover scegli l’immagine da far apparire al passaggio del mouse.

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

Menu Image per aggiungere icone nel menu del tuo sito WordPress

AGP Font Awesome Collection

Il terzo ed ultimo plugin che approfondiremo in questa guida si chiama AGP Font Awesome Collection. Al momento in cui scrivo, il plugin è stato aggiornato alla versione 4.8.7 di WordPress. È uno strumento molto interessante e spero davvero che continui ad essere aggiornato.

AGP integra le icone Font Awesome non solo all’interno del menu, ma su tutte le pagine ed i post del tuo sito WordPress.

Vuoi aggiungere intestazioni non cliccabili al tuo menu WordPress? Abbiamo scritto una guida proprio su questo.

Quando attivi AGP Font Awesome Collection, appare tra gli strumenti del tuo editore visuale una piccola icona “FA”. Cliccandoci sopra potrai configurare ed inserire le icone che desideri.

Invece, per aggiungere icone al menu, procedi in questo modo: come al solito, naviga in Aspetto > Menu. Quindi, espandi la casella della singola voce del menu. Troverai un menu a tendina chiamato “Menu Icon”. Qui, seleziona l’icona che vuoi inserire.

AGP Font Awsome - aggiungere icone al menu

Come vedi, anche questo strumento è semplicissimo da usare.

Conclusione

Oggi abbiamo visto tre plugin utili 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.

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

Avevi già provato questi strumenti?

Parliamone nei commenti!

NOTA: Questa guida è stata pubblicata originariamente nel Luglio 2015 ed è stata completamente riscritta e aggiornata per accuratezza e comprensibilità.

Comprare un dominio e uno spazio hosting WordPress su SiteGround

Altre guide della stessa
categoria

22 COMMENTI
Commenta
  1. 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

    Rispondi
  2. 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?

    Rispondi
  3. 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

    Rispondi
  4. Massimiliano

    Ciao! Questa guida mi ha quasi salvato la vita! :-D
    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

    Rispondi
    • Andrea Di Rocco

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

      Rispondi
  5. 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!!!

    Rispondi
    • 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!

      Rispondi
      • 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…!

        Rispondi
  6. 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 :)

    Rispondi
  7. 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

    Rispondi
    • 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

      Rispondi

Lascia qui il tuo commento

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