Drupal : Add an icon to the menu links
We all like decorated items than normal ones. Everyone like to add icon/image to their site's menu links but we need some tricks to add that into our drupal site's menu link. I am going to show you various methods to add an icon/image to the drupal menu links.
1. theme_menu_link() :
It would return html elements for the menu and it's submenu. We can change the menu html elements using this function and this function must be written in our theme's template.php file. In this example, I am going to add icons to the main menu.
/**
* Implementation of theme_menu_link__MENU_NAME().
*/
function THEME_NAME_menu_link__main_menu(array $variables) {
$element = $variables ['element'];
$sub_menu = '';
if ($element ['#below']) {
$sub_menu = drupal_render($element ['#below']);
}
$icon = 'icon-' . $element['#title'];
$output = l($icon . $element ['#title'], $element ['#href'], $element ['#localized_options']);
return '<li' . drupal_attributes($element ['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
This will add our new unique class to all main menu links, we could simply add the icons with class using css style.
2. Menu Icons :
The menu icons is a drupal contributed module. It is one of the simplest solutions to add the icons/images through UI. This module allows you to upload an image in the menu-item configuration form.