How do I change the toolbar icons?
Hi!
I find the flat, low-contrast, grey toolbar icons boring and a bit difficult to recognize. Most applications offer some form of relieve,for example with gimp it is just one click in the preferences to change to a colourful icon theme, intellij IDEA has a plugin to get rid of those bland, boring, dull grey things. Is there a way to install a different icon set in firefox quantum? As I understand it, complete themes have been abolished and there i not a word about how to replace them on the customization page.
Chosen solution
Update 2: Now it works.... (see picture)
the icon ids are from the toolbarbutton-icons.inc.css file.
The !important flags seem to be important...
Read this answer in context 👍 0All Replies (5)
Hi, I do not have my notes tonight so no long list of sites for you.
About 230 million ways to customize Firefox with userChrome
Place to ask questions and get code for usserChrome : https://www.reddit.com/r/firefox/ A extension :
At this time those sort of Extensions that modified Firefox Controls are not allowed due to security and stop those things from crashing Firefox. Maybe in the near future as there is a new standard people are writing code for it to make new extensions that are compatible.
Update: It looks like the icons and their animations are svg vector graphics files defining the shapes , located in the source repository at browser/themes/shared/icons, with the css for icons and fill colours probably defined in browser/themes/shared/toolbarbutton-icons.inc.css. It does not seem to work to change them from a userChrome.css file (tried replacing forward.svg with back.svg in #forward-button) . I guess I leave it there. It is not that important, just a minor nuisance.
Chosen Solution
Update 2: Now it works.... (see picture)
the icon ids are from the toolbarbutton-icons.inc.css file.
The !important flags seem to be important...
Modified by fnordbric
Note that fill-opacity is not a color value, but a number between 0 and 1.
You should always use the important flag when you want to override a defined property, but I think that using only the fill property to set the (text) color would be sufficient (why override the forward button with the icon of the back button??)
#back-button {
fill: #ff3010 ! important;
/* list-style-image: url("chrome://browser/skin/back.svg"); */
}
#forward-button {
fill: #ff3010 ! important;
/* list-style-image: url("chrome://browser/skin/forward.svg"); */
}
I did not know exactly what fill-opacity was for, so I just tried to set a different color there to see if there was any effect. Overriding the forward button with the back button was just to find out if I could override the icon there. At the end, I just changed the forward/back buttons to blue, reload to green and stop to red for now, without changing the shapes.