[Answered] Question - change the "New Private Tab" button icon form toolbar

[RaitaroH]

So, is it possible to change the privacy-16.png to something else using css that can be added in userChrome.css It was simple enough to download this from github, replace that image with my own icon and make the xpi, but I was wondering If I could change that icon with css alone. Something like this:

.tabs-newprivatetab-button { list-style-image: url("image.png") !important; }

I know about your Styles examples but that is not what I want to do. Those target the tabs or the menu, not the new private tab button.

Private Tab 0.1.9.1 Firefox 46.0.1 Linux Mint 17.3 cinnamon 2.8.8, 64bit

[Infocatcher]

You can use relative links in userChrome.css, just place

chrome/
├─ userChrome.css
└─ image.png

for your example with list-style-image: url("image.png"). (Or you can use data:… URI to encode image.)

Example to change icon of toolbar button:

#privateTab-toolbar-openNewPrivateTab,
#privateTab-afterTabs-openNewPrivateTab {
    list-style-image: url("privacy-24.png") !important;
    -moz-image-region: auto !important;
}
toolbar[iconsize="small"] #privateTab-toolbar-openNewPrivateTab,
toolbar[iconsize="small"] #privateTab-afterTabs-openNewPrivateTab {
    list-style-image: url("privacy-16.png") !important;
}
/* Special icon for Australis (menu panel and customization area) */
#privateTab-toolbar-openNewPrivateTab[cui-areatype="menu-panel"],
#customization-palette > toolbarpaletteitem[place="palette"] > #privateTab-toolbar-openNewPrivateTab {
    list-style-image: url("privacy-32.png") !important;
}

(similar styles used in Private Tab itself)

Or simplified and minimalistic:

#privateTab-toolbar-openNewPrivateTab,
#privateTab-afterTabs-openNewPrivateTab {
    list-style-image: url("privacy-16.png") !important;
    -moz-image-region: auto !important;
}

[RaitaroH]

Thank you very much, that is exactly what I needed. I have also changed other icons to fit with my theme and I also wanted to change PrivateTab too so I asked here.