How to add a span before a tabs item?

Question

I would like to add a little icon before the tab item 'Edit'. Firebug shows that the default code looks like this:

<ul class="tabs-primary tabs primary">
  <li class="tabs-primary__tab">
    <a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link">Edit</a>
  </li>
</ul>

My idea is to add a span before the <a>...</a>:

<ul class="tabs-primary tabs primary">
  <li class="tabs-primary__tab">
    <span class="edit"></span>
    <a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link">Edit</a>
  </li>
</ul>

where the edit class has the underneath CSS.

.edit {
    background-image: url("MY_IMAGE.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    padding-right: 2px;
    vertical-align: middle;
    width: 16px;
}

Adding the <span> directly with Firebug gives the wanted result, but I don't know how to do this in a template or with a function. What is the correct way to achieve this?

Answer 1

Instead of adding a <span> element, you could also use the ::before CSS selector. If a combination with :first-child or :nth-child() is not helpful, most likely you have to implement hook_menu_local_tasks_alter() and add a specific class to the desired link(s) (you can add them through attributes in localized_options of the #link property, see https://api.drupal.org/comment/25393#comment-25393) and then you could use the ::before selector. Or you could implement/overwrite theme_menu_local_task() (probably in combination with a theme preprocess or the earlier mentioned alter function) to add your <span> element.

Answer 2

You can paste code below in your theme file template.php and clear cache

function [yourtheme]_menu_local_task($variables) {
  $link = $variables ['element']['#link'];
  $link_text = $link ['title'];

  if (!empty($variables ['element']['#active'])) {
    // Add text to indicate active tab for non-visual users.
    $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';

    // If the link does not contain HTML already, check_plain() it now.
    // After we set 'html'=TRUE the link will not be sanitized by l().
    if (empty($link ['localized_options']['html'])) {
      $link ['title'] = check_plain($link ['title']);
    }
    $link ['localized_options']['html'] = TRUE;
    $link_text = t('!local-task-title!active', array('!local-task-title' => $link ['title'], '!active' => $active));
  }

  return '<li' . (!empty($variables ['element']['#active']) ? ' class="active"' : '') . '><span class="edit"></span>' . l($link_text, $link ['href'], $link ['localized_options']) . "</li>\n";
}