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

&lt;ul class="tabs-primary tabs primary"&gt;
  &lt;li class="tabs-primary__tab"&gt;
    &lt;a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link"&gt;Edit&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;


My idea is to add a span before the &lt;a&gt;...&lt;/a&gt;:

&lt;ul class="tabs-primary tabs primary"&gt;
  &lt;li class="tabs-primary__tab"&gt;
    &lt;span class="edit"&gt;&lt;/span&gt;
    &lt;a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link"&gt;Edit&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;


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 &lt;span&gt; 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?
Instead of adding a &lt;span&gt; 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 &lt;span&gt; element.