Skip to main content
menu icons

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.

3. Menu Html :

The menu html is also drupal contributed module. It allows you to add html elements in the menu link title field, so we could simply add the icon's html element in the title field and then we could style them using css.

If you are using Glyphicons in your site, then that can be done with following steps:

  1. Go to the menu item configuration page.
  2. Add the menu link title like this <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Menu title
  3. Enable Menu html options.
  4. Save the menu links.

Note * : <span class="glyphicon glyphicon-align-left" aria-hidden="true"> It is the bootstrap's glyphicon.

Comments

Marvin (not verified)

Thu, 01/28/2016 - 05:39

Hey do you know how to create this in Drupal 8? I am currently trying with THEME_preprocess_menu__account(&$variables, $hook) but there are problems with rendering the link together with an image.

all the best
marvin