How to display an image before title text in menu items

Question

I am using Advanced Custom Fields to add images to individual menu items. These images are being appended to the $item->title with the following code:

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {
      $item->title .= '<span class="inline-img' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span>';
    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);

Instead of appending the images, I am needing to have the <span> and replaced images display before the $item->title text.

The images are being replaced using the SVG Support plugin with the style-svg class.

For example:

<a href="#">
  <span class="inline-img">
    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
      <!-- SVG image -->
    </svg>
  </span>
  Menu Item Title
</a>

The wp_nav_menu code for rendering the menu:

$args = array(
  'theme_location' => 'global-footer-navigation',
  'menu_id' => 'global-footer-navigation',
  'container' => false,
  'echo' => false,
  'items_wrap' => '%3$s',
  'depth' => 0,
);
// Strip all remaining menu HTML except for <a>, <span>, and <img> tags
echo strip_tags(wp_nav_menu( $args ), '<a><span><img>' );

How can I filter the menu item title text and have the <span> display before it?

Answer 1

You are almost there, see comments in code below...

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {

      // Your original code which appends html string to current $item->title
      //$item->title .= '<span class="inline-img' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span>';

      // To prepend your html to title simply override $item->title with new value
      // and include $item->title at the end of your html string value...
      $item->title = '<span class="inline-img ' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span> ' . $item->title;

    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);

Though you should also note there is no $item->class property.

There is a $item->classes property which is an array. You will need to implode() array into a string, see example and comments in code below...

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {
      
      // if $item->classes is array then implode array values into string
      $classes = is_array($item->classes) ? implode(" ", $item->classes) : '';

      // prepend span and image to $item->title
      $item->title = '<span class="inline-img ' . $classes . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span> ' . $item->title;

    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);