Adding Icon fields to Menu Items

Add Custom Icons to Elementor Nav Menus (No Paid Plugins!)

Using this method, you can add your own custom icons to your Elementor navigation menus. You may have seen other methods or workarounds that let you embed Elementor or Font Awesome icons into menus, or plugins that will do the job for you, but this is a simple solution that lets you use any image you like as your icon, control which devices it appears on and all without having to install any Paid Add-Ons plugins.

This feature requires the Advanced Custom Fields plugin to work.

Adding fields to Menu Items

Using Advanced Custom Fields to add a field item to the menu.
  • Field Type: Image
  • Return Format: Image URL
  • Library: All
Location Rules Show this field group if Menu item is equal to your menu

Editing fields

Navigating to the Appearance > Menus admin page.
menu icon2

Displaying fields with FUNCTIONS.PHP in Code block

				
					// [php] Adding Icon fields to Menu Items

<?php
add_filter('wp_nav_menu_objects', 'gcs_wp_nav_menu_objects', 10, 2);

function gcs_wp_nav_menu_objects( $items, $args ) {  
    // loop
    foreach( $items as &$item ) {     
        // vars
        $menu_icon = get_field('op-icon_menu', $item);
         
        // append icon
        if( $menu_icon ) {
            $item->title .= ' <img decoding="async" class="menu-icon" src="'.$menu_icon.'" />';        
        }  
    }   
    // return icon to the menu widget
    return $items;
    
}
?>
Related