How-To make navigation menu with images

I needed a navigation menu that used both text and images; replacing the text where an appropriate image existed.

This solution works well as a function in your custom theme template.php:

/**
 * Allows for images as menu items.
 * Just supply the an image path in the title. The image path will be replaced
 * with an img tag. The description is used as alt text and title.
 * Implements theme_menu_link(). 
 * Reference: https://scito.ch/content/allow-images-menu-items-drupal-7
 * All social image files need to be saved in files/social_icons
 */
function custom_theme_menu_link($variables) {
  $element = &$variables['element'];
  $title= $element['#title'];
  $file= 'public://social_icons/'.$title.'.png';
  $directfile = '/files/social_icons/'.$title.'.png';
    if(file_exists($file)){ // only grab a social icon if it exists based upon the name of the link in the menu
    $element['#title'] = '<img alt = "' . $title . '" src = "' . $directfile . '" title="Go to our '.$title.' channel." />';
    $element['#localized_options']['html'] = TRUE;
  }

  return theme_menu_link($variables);
}