Milan Dinić

<p><a href="http://blog.milandinic.com/wordpress/plugins/nav-menu-images/" rel="nofollow ugc">Plugin homepage</a> | <a href="http://blog.milandinic.com/" rel="nofollow ugc">Plugin author</a> | <a href="http://blog.milandinic.com/donate/" rel="nofollow ugc">Donate</a></p>
<p>This plugin enables you to upload images for nav menu items on a menu edit screen. By default, those images will be displayed instead of text for respective menu items. Note that after upload, you should set an image as ‘featured’ to be able to display it.</p>
<p>You can also set images that will be displayed only when you hover menu item, or when menu item is of currently displayed page. <a href="http://blog.milandinic.com/wordpress/plugins/nav-menu-images/#how-to-use" rel="nofollow ugc">Read detailed instructions about using plugin</a>.</p>
<p>Developers can use many available filters to make their own way of displaying images, or even create a child class on top of base one. See source code for more ideas.</p>
<p>Although this plugin displays uploaded images out of the box, it will probably not give best possible look, so it’s recommended to create custom CSS styles for affected elements.</p>
<p>Nav Menu Images code is partly based on a code from now defunct plugin Custom Menu Images by <a href="http://huellaspyp.com/" rel="nofollow ugc">Anabelle Handdoek<br />
</a>/<a href="http://8manos.com/" rel="nofollow ugc">∞manos s.a.s</a> and a code from plugin <a href="https://wordpress.org/extend/plugins/metronet-profile-picture/" rel="ugc">Metronet Profile Picture</a> by <a href="http://www.ronalfy.com/" rel="nofollow ugc">Ronald Huereca</a>/<a href="http://www.metronet.no/" rel="nofollow ugc">Metronet Norge AS</a>.</p>


Nav Menu Images

Great and light weight plugin, without affecting core functionality of WordPress.



Code quality

Does what it's supposed to.
Would love the possibility to choose wether or not to replace all link content - would be nice if the link text would still be shown + adding a custom class to image.

Does what it promise

Works well.

Themeisle

WPShout

<p>This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YcSotWXIczI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Usage</h4>
<ol>
<li>After the plugin is activated, go to <em>Appearance</em> > <em>Menus</em> to edit your menus</li>
<li>Enable/Disable icon types in “Menu Icons Settings” meta box</li>
<li>Set default settings for current nav menu; these settings will be inherited by the newly added menu items</li>
<li>Select icon by clicking on the “Select icon” link</li>
<li>Save the menu</li>
</ol>
<h4>Supported icon types</h4>
<ul>
<li>Dashicons (WordPress core icons)</li>
<li><a href="http://shoestrap.org/downloads/elusive-icons-webfont/" rel="nofollow ugc">Elusive Icons</a> by <a href="http://shoestrap.org/blog/author/aristath/" rel="nofollow ugc">Aristeides Stathopoulos</a></li>
<li><a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by <a href="http://twitter.com/davegandy" rel="nofollow ugc">Dave Gandy</a></li>
<li><a href="http://zurb.com/playground/foundation-icon-fonts-3/" rel="nofollow ugc">Foundation Icons</a> by <a href="http://zurb.com/" rel="nofollow ugc">Zurb</a></li>
<li><a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> by <a href="http://automattic.com/" rel="nofollow ugc">Automattic</a></li>
<li><a href="http://fontello.com/" rel="nofollow ugc">Fontello</a> icon packs</li>
<li><a href="http://themeisle.com/free-icons/" rel="nofollow ugc">TI Icons</a> icon pack by <a href="http://twitter.com/themeisle" rel="nofollow ugc">ThemeIsle</a></li>
<li>Image (attachments)</li>
<li>SVG (attachments)</li>
</ul>
<h4>Planned supported icon types</h4>
<ul>
<li>Image (URL)</li>
</ul>
<h4>Compatible themes</h4>
<p>Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or <a href="https://themeisle.com/themes/hestia/" rel="nofollow ugc">Hestia</a>.</p>
<p>Development of this plugin is done on <a href="https://github.com/codeinwp/wp-menu-icons" rel="nofollow ugc">GitHub</a>. <strong>Pull requests welcome</strong>. Please see <a href="https://github.com/codeinwp/wp-menu-icons/issues" rel="nofollow ugc">issues reported</a> there before going to the plugin forum.</p>
<h3>If you like this plugin, then consider checking out our other projects:</h3>
<p><a href="https://www.codeinwp.com/blog/" rel="nofollow ugc">CodeinWP Blog</a> – Designer’s Guide To WordPress<br />
<a href="https://revive.social" rel="nofollow ugc">Revive.Social</a> – Social Media Tools<br />
<a href="https://justfreethemes.com" rel="nofollow ugc">JustFreeThemes</a> – Free WordPress Themes directory</p>


Menu Icons by Themeisle – Add Icons to Navigation Menus

Add icons to WordPress navigation menus easily — pick from Font Awesome, Dashicons, image icons & more. Style menu items with custom colors & sizes.

Nav Menu Images vs Menu Icons by Themeisle – Add Icons to Navigation Menus