{"id":2797,"date":"2015-07-08T15:58:15","date_gmt":"2015-07-08T13:58:15","guid":{"rendered":"http:\/\/www.wppratico.com\/?p=2797"},"modified":"2015-12-04T17:54:31","modified_gmt":"2015-12-04T15:54:31","slug":"aggiungere-icone-al-menu-wordpress","status":"publish","type":"post","link":"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/","title":{"rendered":"Aggiungere icone al menu WordPress"},"content":{"rendered":"<p>La tendenza oggi \u00e8 quella di creare siti minimal, semplici e con grafica ridotta all&#8217;essenziale. Io sono assolutamente favorevole: i nostri siti devono essere facili da navigare ANCHE da mobile (ricordo che ormai il 50% delle visite avviene via mobile).<\/p>\n<p>A volte per\u00f2, per dare un tocco di stile, basta veramente poco. <strong>Le icone posso essere molto utili in questi casi e possono migliorare l&#8217;usabilit\u00e0 del sito<\/strong>.<br \/>\nInserirle nel menu principale, ad esempio, pu\u00f2 dare una svolta all&#8217;header ovvero in una delle parti pi\u00f9 in vista (e quindi pi\u00f9 importante).<\/p>\n<p>Ma come possiamo aggiungere delle belle icone ai menu creati in WordPress?<br \/>\nBeh su alcuni <a href=\"http:\/\/go.wppratico.com\/themeforest\" target=\"_blank\">template professionali<\/a> sono gi\u00e0 integrate una serie di icone pronte per essere usate. Per tutto il resto&#8230; ci sono i plugin! \ud83d\ude00<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2838\" src=\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-con-icone-wordpress.png\" alt=\"menu con icone wordpress\" width=\"666\" height=\"370\" srcset=\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-con-icone-wordpress.png 666w, https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-con-icone-wordpress-570x317.png 570w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Menu icon per aggiungere tutte le icone che vuoi<\/h2>\n<p>Devo riformulare: &#8220;c&#8217;\u00e8 il plugin&#8221; perch\u00e8 <a href=\"https:\/\/wordpress.org\/plugins\/menu-icons\/\" target=\"_blank\">Menu icons<\/a> \u00e8 potentissimo, completo e funziona benissimo, per questo lo stra-consiglio.<\/p>\n<p>Dopo averlo installato con la solita procedura, possiamo andare direttamente nella sezione <em>Aspetto > Menu<\/em> per notare che \u00e8 stato aggiunto un box.<\/p>\n<p>Con esso possiamo selezionare le gallery di icone da importare. Oltre quella pre-installata su wordpress (Dashicons) possiamo trovarne altre, come la super <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/\" target=\"_blank\">fortawesome<\/a> che io adoro.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2834\" src=\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons1.png\" alt=\"menu icons\" width=\"636\" height=\"444\" srcset=\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons1.png 636w, https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons1-570x398.png 570w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<p>\u00c8 importante selezionare <strong>soltanto i &#8220;pacchetti icone&#8221; che servono per non caricare tutto indistintamente, cos\u00ec teniamo il sito veloce<\/strong>. Cio\u00e8 se utilizziamo soltanto le icone Font-Awesome, disabilitiamo le altre.<\/p>\n<p>Ma passiamo all&#8217;inserimento pratico di un&#8217;icona. Aprendo la scheda di una voce del menu clicchiamo su <strong>Icon: Select<\/strong> in fondo.<\/p>\n<p>Si aprir\u00e0 un popup dal quale andremo a selezionare l&#8217;icona che ci serve.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2837\" src=\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons2.png\" alt=\"menu icons\" width=\"1220\" height=\"725\" srcset=\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons2.png 1220w, https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons2-570x339.png 570w, https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons2-1024x609.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<p>A sinistra possiamo scegliere la raccolta e <strong>al centro troviamo tutte le icone<\/strong>. Il plugin \u00e8 fantastico e permette addirittura di effettuare una ricerca per keyoword.<\/p>\n<p>Una volta selezionata l&#8217;icona che pi\u00f9 ci piace, possiamo <strong>trovare a destra le impostazioni<\/strong> per:<br \/>\n&#8211; nascondere l&#8217;etichetta (e quindi mostrare solo l&#8217;icona senza testo)<br \/>\n&#8211; posizione (o prima o dopo il testo)<br \/>\n&#8211; allineamento verticale<br \/>\n&#8211; grandezza icona<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2835\" src=\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-icons3.png\" alt=\"menu icons\" width=\"354\" height=\"399\" \/><\/p>\n<p>E come se non bastasse&#8230; se propio non troviamo l&#8217;icona che ci piace tra le 8 milioni presenti, <strong>possiamo caricare un&#8217;immagine personalizzata<\/strong>!!<\/p>\n<p>Attenzione per\u00f2, la riproduzione della Monnalisa potrebbe non andare benissimo come icona: se optiamo per questa strada utilizziamo sempre delle immagini molto semplici, belle anche se ridimensionate molto piccole, formato png, senza sfondo e possibilmente monocromatiche.<\/p>\n<hr \/>\n<p><strong>Qualche idea&#8230;<\/strong><\/p>\n<p><img loading=\"lazy\" class=\" size-full wp-image-2836 alignright\" src=\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/menu-social.png\" alt=\"menu social\" width=\"287\" height=\"337\" \/>Ecco un esempio di un <strong>menu che ho creato con i link ai social che utilizzo<\/strong>.<br \/>\nper fare ci\u00f2 ho creato un nuovo menu, chiamandolo Social, ho inserito dei link personalizzati che puntano ai vari profili e infine, per ogni link, ho selezionato la rispettiva icona.<\/p>\n<p>Il menu ovviamente va posizionato in sidebar usando il widget &#8220;menu personalizzato&#8221;.<\/p>\n<p>&nbsp;<\/p>\n<p>Io ho utilizzato fontawesome ma nulla vieta di utilizzare delle icone colorate, scaricate da siti come <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\">iconfinder<\/a>.<\/p>\n<p>In alternativa, per creare un menu con i link social e le icone relative, esiste un altro plugin specifico: <a href=\"https:\/\/wordpress.org\/plugins\/menu-social-icons\/screenshots\/\" target=\"_blank\">Menu social icons<\/a>.<\/p>\n<p>Ma preferisco di molto il Menu Icons, veramente semplice da usare ma allo stesso tempo potentissimo.<\/p>\n<p>Se l&#8217;hai gi\u00e0 utilizzato, non trovi sia un plugin perfetto per lo scopo? Se non l&#8217;hai ancora fatto che ne pensi di abbellire il sito con delle icone? <\/p>\n<p>Scrivilo nei commenti!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La tendenza oggi \u00e8 quella di creare siti minimal, semplici e con grafica ridotta all&#8217;essenziale. Io sono assolutamente favorevole: i nostri siti devono essere facili da navigare ANCHE da mobile (ricordo che ormai il 50% delle visite avviene via mobile). A volte per\u00f2, per dare un tocco di stile, basta veramente poco. Le icone posso [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[11],"tags":[163,32],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aggiungere icone al menu Wordpress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aggiungere icone al menu Wordpress\" \/>\n<meta property=\"og:description\" content=\"La tendenza oggi \u00e8 quella di creare siti minimal, semplici e con grafica ridotta all&#8217;essenziale. Io sono assolutamente favorevole: i nostri siti devono essere facili da navigare ANCHE da mobile (ricordo che ormai il 50% delle visite avviene via mobile). A volte per\u00f2, per dare un tocco di stile, basta veramente poco. Le icone posso [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress Pratico\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WordpressPratico\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/andreagiavara\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-08T13:58:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-04T15:54:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/aggiungere-icone-menu-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n<meta property=\"fb:app_id\" content=\"221729387867650\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@giavara\" \/>\n<meta name=\"twitter:site\" content=\"@giavara\" \/>\n<meta name=\"twitter:label1\" value=\"Scritto da\">\n\t<meta name=\"twitter:data1\" value=\"Andrea\">\n\t<meta name=\"twitter:label2\" value=\"Tempo di lettura stimato\">\n\t<meta name=\"twitter:data2\" value=\"2 minuti\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.wppratico.com\/#organization\",\"name\":\"WP Pratico\",\"url\":\"https:\/\/www.wppratico.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/WordpressPratico\",\"https:\/\/instagram.com\/andreagiavara\/\",\"http:\/\/it.linkedin.com\/in\/giavara\",\"https:\/\/it.pinterest.com\/giavara\/\",\"https:\/\/twitter.com\/giavara\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/#logo\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/05\/logo-wppratico.png\",\"width\":360,\"height\":120,\"caption\":\"WP Pratico\"},\"image\":{\"@id\":\"https:\/\/www.wppratico.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wppratico.com\/#website\",\"url\":\"https:\/\/www.wppratico.com\/\",\"name\":\"Wordpress Pratico\",\"description\":\"Realizza da solo il tuo Sito con Wordpress\",\"publisher\":{\"@id\":\"https:\/\/www.wppratico.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.wppratico.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#primaryimage\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/www.wppratico.com\/wp-content\/uploads\/2015\/07\/aggiungere-icone-menu-wordpress.png\",\"width\":1200,\"height\":628,\"caption\":\"aggiungere icone menu wordpress\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#webpage\",\"url\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/\",\"name\":\"Aggiungere icone al menu Wordpress\",\"isPartOf\":{\"@id\":\"https:\/\/www.wppratico.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#primaryimage\"},\"datePublished\":\"2015-07-08T13:58:15+00:00\",\"dateModified\":\"2015-12-04T15:54:31+00:00\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.wppratico.com\/#\/schema\/person\/3adea1f91e6d88f8addf29abe7832412\"},\"headline\":\"Aggiungere icone al menu WordPress\",\"datePublished\":\"2015-07-08T13:58:15+00:00\",\"dateModified\":\"2015-12-04T15:54:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#webpage\"},\"commentCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.wppratico.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#primaryimage\"},\"keywords\":\"icone,menu\",\"articleSection\":\"Plugin\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.wppratico.com\/aggiungere-icone-al-menu-wordpress\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wppratico.com\/#\/schema\/person\/3adea1f91e6d88f8addf29abe7832412\",\"name\":\"Andrea\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.wppratico.com\/#personlogo\",\"inLanguage\":\"it-IT\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/278d8fda036301e57b833517c1e735f0?s=96&d=mm&r=g\",\"caption\":\"Andrea\"},\"description\":\"Sono Andrea Giavara, imprenditore con Growers e appassionato di Business e Digital. Ho creato WP Pratico nel 2010, la guida step-by-step per creare siti che funzionano, senza programmare. Puoi contattarmi oppure seguirmi @giavara\",\"sameAs\":[\"http:\/\/www.wppratico.com\/\",\"https:\/\/www.facebook.com\/andreagiavara\",\"https:\/\/twitter.com\/giavara\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts\/2797"}],"collection":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/comments?post=2797"}],"version-history":[{"count":0,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/posts\/2797\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/media\/2852"}],"wp:attachment":[{"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/media?parent=2797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/categories?post=2797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wppratico.com\/wp-json\/wp\/v2\/tags?post=2797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}