Replacing menu link text with image: overriding the right function? I try to use images instead of text in main menu, in a theme I'm building. Used different solutions in my template.php, without any luck. Drupal prints the link to the image and not the image itself. I even use the suggested Drupal modules (menuicon and menuimage). But I got the same bad result.

Same kind of questions was asked here around but with no working solution for me, as far as I tried. 

Yesterday, a similar question was asked on Stackoverflow and get a comment from Clive (https://stackoverflow.com/questions/19788449/overridden-theme-menu-link-is-not-used). Clive gave a hint on maybe this user is overriding the wrong function. But unfortunately, the question was removed by the user last night. Yes, I'm that kind of unlucky guy :-) 

So, I will try to ask it myself with some posted code, hoping that someone can give me a clue to solve the issue. 

Here is the code in my template.php:

    function caracole_menu_link($link) {
       $element = $link['element'];
       // Allows for images as menu items. Just supply the path to the image as the title
       if ( strpos($element ['#title'], '.png') !== false || strpos($element ['#title'], '.jpg') !== false || strpos($element ['#title'], '.gif') !== false) {
       $link['element']['#title'] =  '&lt;img alt="'. $element['#original_link']['description'].'" src="'. url($link['element']['#title']) .'" title="'. $element['#original_link']['description'] .'"&gt;';
       $link['element']['#localized_options']['html'] = TRUE;
    }
    return theme_menu_link($link);
    } 


It's one of the solutions provided on forums. But I can't get it to work for me...

best regards,

plouf
Consider using hook_preprocess_link().

Here's a snippet:

/**
 * Implements hook_preprocess_link().
 */
function example_preprocess_link(&amp;$variables) {
  if ($variables['path'] == 'path/of/link/to/change') {
    $variables['options']['attributes']['class'][] = 'class-use-image';
  }
}


Then in your CSS file, define the class that replaces the text with the image:

.class-use-image {
  width: 350px; 
  height: 75px;
  background: url("images/&lt;your-iamge&gt;");
  text-indent: -9999px;
}


More techniques on replacing text with image here.