Extra Top Menu Icon

I want to change the extra_top_menu. But i don't know where to start...

Now within the menu you've got the icons as image with a width of 16px and a height of 16px. I want to delete the images and set the image link as background image for the <a class="extra_item top_indent... etc. Than the menu works better and looks a lot nicer for our website.

I found this code in extra_top_menu.html in templates/base:
<a class="extra_item __item_link_indent__" style="HERE NEEDS TO COME THE BACKGROUND-IMAGE LINK"href="__menu_link__" __extended_action__ __target__>__menu_image__ __menu_caption__</a>

Also i found the menu_image tag in BxDolMemberMenu but there was no code for the image ( <img... etc. )

How can i set the image link / url within the a class?

There are several forum topics on icons in the service menu; have you searched yet?  The service menu builder is incomplete, it has a field for icon but the code that works with the service menu is not set up for images.  There are several forum topics on here about adding icons; one method was to simply edit the language key.  I used a different method for the icons because I wanted roll-over effects and not sure you can do that in the language keys.

RE: "I want to change the extra_top_menu. But i don't know where to start..."

Not sure why GG is off in the weeds talking about the service menu, when your question is about the member menu.

Anyway, without some template/code modifications, you can't target "<a class="extra_item top_indent... etc. " because there are no unique identifiers.  You can however, target the icon within the <i> tags.

For instance, to replace the mail icon, you might add something like this to your templates general.css

.menu_item .sys-icon.envelope:before {
display:none;
}

.menu_item .sys-icon.envelope {
background-color:transparent;
background-size:48px 32px;
background-repeat:no-repeat;
background-image:url('https://cdn4.iconfinder.com/data/icons/world-flags/180/flag_us_america_united_states-48.png');
width:48px;
height:32px;
padding:3px;
}

You'll then have to tweak other css to accommodate the height of whatever image you use.  In the above case, I'd also have to change the height in the css below:

Btw, excuse the accidental post report.

HL, even you can make a mistake and you have, many times.  If he had said member menu, which is what Boonex calls it in the template settings then I wouldn't have said the wrong thing.  When I see top menu, I think the menu in the header.

Ok, thanks! That worked :)

And for the icons in the navigation menu? That aren't working at all? How can i do that?