Come aggiungere icone nel menu del tuo sito WordPress

aggiungere icone nel menu del tuo sito wordpress

Nella guida di oggi vedremo 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 con i plugin

Menu Icons

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

Al momento, non risulta ancora aggiornato alla versione 4.2.2 di WordPress. Io l’ho testato personalmente e non ha generato problemi sul mio sito di prova (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.

Schermata 2015-07-08 alle 17.45.12

Schermata 2015-07-08 alle 22.37.07

Sulla destra, troverai anche alcune opzioni aggiuntive:

  • 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).
  • Font Size; per determinare quanto grande deve essere l’icona.

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

aggiungi icone al menu 1

Come vedi, Menu Icons è uno strumento veramente immediato e facile da usare.

Menu Social Icons

Il secondo plugin di cui parliamo per aggiungere icone nel menu del tuo sito WordPress si chiama Menu Social Icons.

Come nel caso dello strumento precedente, purtroppo il plugin non risulta aggiornato all’ultima versione di WordPress. L’ho però testato e sul mio sito di prova non ha generato errori.

Menu Social Icons serve ad aggiungere i collegamenti social nella barra di navigazione.

Installato il plugin, naviga sempre in Aspetto > Menu. Quindi, espandi la sezione “Link personalizzati”.

Qui, troverai alcune icone social da selezionare ed associare all’url dei tuoi vari profili. Se desideri, puoi anche modificare l’aspetto delle icone utilizzando codici CSS (trovi la video guida a riguardo – in inglese – su questa pagina).

aggiungi icone al menu 3

AGP Font Awesome Collection

Il terzo ed ultimo plugin che approfondiremo in questa guida si chiama AGP Font Awesome Collection. E’ uno strumento relativamente nuovo che promette molto bene.

Questo strumento serve ad integrare le icone Font Awesome non solo all’interno del menu, ma su tutte le pagine ed i post del tuo sito WordPress.

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.

aggiungi icone al menu 2

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!

Andrea Di Rocco

Andrea Di Rocco

Ciao! Sono Andrea, il webmaster di SOS WordPress. La mia missione è di aiutarti a diventare autonomo nel creare il tuo sito web, posizionarti sui motori di ricerca e guadagnare online grazie al tuo progetto. Oltre a questo voglio far si che tu spenda il minor quantitativo di soldi e tempo mentre raggiungi i tuoi obiettivi sul web. Conosciamoci nell'area commenti di questo articolo!

PROMOZIONE HOSTING WORDPRESS SITEGROUND

SiteGround - Miglior hosting per Wordpress
16 commenti
  1. dice:

    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
    • dice:

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

      Rispondi
  2. dice:

    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
    • dice:

      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
      • dice:

        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
  3. dice:

    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
  4. dice:

    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
    • dice:

      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 un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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