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?