Replacing icon on about:home tab - SOLVED
I'm trying to replace the tab icon on the Firefox about:home page (i.e. Start Page).
I have tried using the following:
tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important;
}
But it doesn't work. If I switch from the URL to display:none, it does hide the tab icon, so I know I've got the ID and class correct.
I also tried using background-image: instead of list-style-image: and it did make a change, but both old and new icons were visible at the same time, with the old icon on top, so you can barely see the new replacement icon.
What css should I use so that the icon is fully replaced?
I have tried using the following:
tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important;
}
But it doesn't work. If I switch from the URL to display:none, it does hide the tab icon, so I know I've got the ID and class correct.
I also tried using background-image: instead of list-style-image: and it did make a change, but both old and new icons were visible at the same time, with the old icon on top, so you can barely see the new replacement icon.
What css should I use so that the icon is fully replaced?
Comments
Try this:
I take it that the second line should have said width:0px rather than width:o but it still worked. In fact it works even with the width command omitted entirely.
I do have one final question regarding changing the title text on that same tab (which I shall ask in a separate post) but as far as changing this icon goes, your css solution has solved the problem.
Thank you so much.