3

I use Drupal 8.

I would simply want to add icons to one of the menus with a <span>.

Have you runways?

Improve this question
5
  • Can you specify the HTML structure you are after? Do you want the <span> tag inside the <a> tag or inside the <li> tag? I have some code for this structure: <ul><li><span></span><a>Link Text</a></li></ul>. Let me know if that is what you are after. Thanks.
    – Rick Bergmann
    Commented Jan 30, 2016 at 11:35
  • Thanks Rick, the html structure : basically : <ul><li><a><span>Link Text</span></a></li>
    – Fluidouix
    Commented Jan 30, 2016 at 13:56
  • In that case I will agree with the answer from Ivan. In order to modify the <a> tag the I would add the <span> via the preprocess_links() function.
    – Rick Bergmann
    Commented Jan 30, 2016 at 17:08
  • Hi Rick, can you propose a solution? That of Ivan in spite of my numerous tries and the hours crossed to try to run it does not work...
    – Fluidouix
    Commented Feb 2, 2016 at 14:00
  • Ok, I will need to try and test some code. As soon as I get a chance I will post some code.
    – Rick Bergmann
    Commented Feb 2, 2016 at 17:03

3 Answers 3

Reset to default
3

This is how I'm doing it for dropdown operations(Font Awesome icons).

/**
 * Implements hook_preprocess_links().
 */
function HOOK_preprocess_links(array &$variables) {
  if (stripos($variables['theme_hook_original'], 'links__dropbutton__operations') === 0) {
    $variables['attributes']['class'][] = 'menu';
    $links = &$variables['links'];
    foreach ($links AS $key => &$link) {
      switch (Html::getClass($key)) {
        case 'view';
        case 'canonical':
          $icon = 'eye';
          break;

        case 'edit':
          $icon = 'pencil';
          break;

        case 'delete':
          $icon = 'trash';
          break;

        case 'clone':
          $icon = 'clone';
          break;

        case 'add':
        case 'create':
        $icon = 'plus';
          break;

        case 'manage-fields':
          $icon = 'list';
          break;

        case 'manage-form-display':
          $icon = 'server';
          break;

        case 'manage-display':
          $icon = 'th';
          break;

        case 'devel':
          $icon = 'code';
          break;

        case 'pay':
          $icon = 'money';
          break;

        case 'enable':
          $icon = 'toggle-off';
          break;

        case 'disable':
          $icon = 'toggle-on';
          break;

        default:
          $icon = 'question';
          break;
      }

      $link['link']['#title'] = [
        '#type' => 'inline_template',
        '#template' => '<i class="fa fa-{{ icon }}" title="{{ title }}"></i><span class="visually-hidden">{{ title }}</span>',
        '#context' => [
          'title' => $link['link']['#title'],
          'icon' => $icon
        ]
      ];
    }
  }
}
Improve this answer
4
  • Thanks Yvan, in Drupal 8 the preprocess functions are always used? I had understood that it was not any more the best way to modify the template.
    – Fluidouix
    Commented Jan 30, 2016 at 14:01
  • No changes in this regard from D7. Sometimes you can use template, sometimes preprocessor is better. It depends on the use case.
    – user21641
    Commented Jan 30, 2016 at 15:10
  • Ok, to adapt your solution to an item of a simple menu (not of dropdown), how I do have to make? For example the user menu? I made out a will but it does not work for the moment
    – Fluidouix
    Commented Jan 30, 2016 at 15:48
  • I try if (stripos($variables['theme_hook_original'], 'menu__account') === 0) { or if ($variables['theme_hook_original'] == 'menu__account') { but doesn't work...
    – Fluidouix
    Commented Feb 1, 2016 at 14:38
1

There is a new easy alternative to display icons in Menu Items in Drupal 8:

The Menu Manipulator module now provides an option for you to create a list of available icons that editors can select when editing menu links.

enter image description here

The icon's ID is then passed to Twig so you can theme/render/display it however you want (e.g. an icon font such as FontAwesome, a custom Twig file, as a background image in CSS ...etc).

Example yourtheme/templates/menus/menu--main.html.twig:

[...]
    {% for item in items %}
      <li{{ item.attributes.addClass('menu-item', 'column') }}>
        {% if item.icon %}
             {# Assuming you use so type of icon font #}
             <span class="fa fa-{{item.icon}}"></span>

             {# Assuming your icons are callable as Twig file. #}  
             {% include '@yourtheme/icons/icon.html.twig' with { icon: item.icon } %}
        {% endif %}
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
[...]
Improve this answer
0

You can check how the Menu Item Extras add the body field or you can use the body field abd insert image with the CKEditor.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.