Gender field icon

I seem to remember a tutorial about putting a icon or little image in a tab I can't remember where?
I want to display a little image in a tab with the tab name next to it?
See how you have put a image and a name in a menu see attached I want the same but in a tab heading.
Thanks

If the HTML is short you can just directly add it to the tab title in CB > Tab Management. If it's too long then it'll be cut short due to storage length limit on tab title. To circumvent that you'll need to use a language key for the tab title then user language overrides to add however long of a title you'd like. Example as follows.

Tab Title: TAB_TITLE_FORGE

Language override would then be as follows.

Key: TAB_TITLE_FORGE
String:
You can use whatever HTML you like here as long as it's valid inside of an "a" element. So images, fontawesome icons, etc.. are all acceptable there.

Can I also change to a new image see attached
Which ways can I do this with css class? Or a new image?
Is it possible to have multiple dropdowns side by side see attached
and is it possible to have a tab name as the start instead of this image? of the dropdown and then its siblings below?
I don't really want all the tabs to disappear when the page is viewed by a mobile device? I would rather it display all tabs until it can't then the image and it siblings?
Thanks

Which ways can I do this with css class? Or a new image?

If you replace it using CSS, yes. It shouldn't even look like that anymore though. The icon is the navbar-toggler-icon Bootstrap 4 class. The selector to change it would be ".cb_template .cbTabsMenuNavBarToggle .navbar-toggler-icon".

Is it possible to have multiple dropdowns side by side see attached

No.

and is it possible to have a tab name as the start instead of this image? of the dropdown and then its siblings below?

On mobile, no.

I don't really want all the tabs to disappear when the page is viewed by a mobile device? I would rather it display all tabs until it can't then the image and it siblings?

There's no functionality for that at this time unless you completely override the CSS. You can do a horizontal scroll like the below user did through CSS for example.

www.joomlapolis.com/forum/255-developer-members-support/240458-solved-tab-nesting-feature#310256

We will be redesigning this again in a future release to try and be even more mobile friendly, but it's complicated as often users have too many tabs or tab names too long to really fit there without being in a hamburger menu.