How To Display Menus With Icon Images In WordPress ?

Menu Image is the new WordPress plugin that lest you display images before menu item text in your WordPress site. The plugin allows you to assign a new image with each menu link you create in your website using the default WordPress menu feature from Appearance -> Menus page.

Installation & Usage: Install and activate Menu Image. After activation it automatically adds a new field for uploading the image in a menu item and this displays the image inside the link present in your site menu before the text.

Customization:

You can change align text vertically: Wrap link text in element and add to your style.css: .menu li a img { vertical-align: middle; }.

You can add another size for image: Just register another image size in your theme with function add_image_size().

You can wrap menu link text in `span` html element:

Where you show your menu with function <?php wp_nav_menu(); ?> as param you can add array('link_before' => '<span>', 'link_after' => '</span>'). It makes css markup easier.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.